持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情
在实际项目中,页面中所需的数据通常是从服务器获取的,这必然牵涉与服务器·的通信,vue官方推荐使用axios来完成Ajax请求。axios是一个基于Promise的HTTP库,可以用在浏览器和node.js中
安装axios
可以将axios结合vue-axios插件一起使用,该插件只是将axios集成到vue.js的轻度封装,本身不能独立使用,在终端安装代码如下:
npm install axios vue-axios
安装好vue-axios插件后,在main.js文件中导入axios,代码如下:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
Vue.use(VueAxios,axios)安装插件
之后在组件内就可以通过this.axios来调用axios的方法发送请求
基本用法
HTTP最基本的请求就是get请求和post请求,使用axios发送get请求调用代码如下:
axios.get('url').then(function (response){
}).catch(function (error){
})
get方法接收一个url作为参数,如果有要发送的数据,则以查询字符串的形式附加在url后面。当服务端发回成功响应HTTP状态码(staus)的值为200时调用then方法中的回调,可以在该回调函数中对服务端的响应进行处理,如果出现错误时会调用catch方法中的回调,可以在该回调函数中对错误信息进行处理,并向用户提示错误。
可以给get方法传递一个配置对象作为参数,在配置对象使用params字段指定要发送的数据代码如下:
axios.get('url',{
params:{
}
}).then(function (response){
}).catch(function (error){
})
post请求是在请求体发送数据,axios的post方法比get方法多一个参数,该参数是一个对象,对象的属性就是要发送的数据。代码如下:
axios.post('url',{
params:{
username:'hgk',
password:'1234'
}
}).then(function (response){
}).catch(function (error){
})
接收到服务端的响应信息后,需要对响应信息进行处理,设置用于组件渲染或更新所需要的数据。回调函数中的response是一个对象,该对象常用的属性是data和status
response对象的完整属性如下:
data:{}:data是服务器发回的响应数据status:200:status是服务器响应的HTTP状态码statusText:‘ok’:是服务器响应的HTTP状态描述headers:{}:是服务器响应的信息报头config:{}: 是为请求提供的配置信息request:{}:是生成此响应的请求