axios是vue中继续网络请求使用的框架，替代以前的ajax
安装方法：npm install axios --save
引用方法：import axios from 'axios'
使用方法：axios（{ url:"",mothod:"get"，params：{type：1，page：2}}）.then(res=>{ console.log(res)})
注意，get使用params查询请求，post提交使用data
并发多个请求使用方法：axios.all([axios1,axios2]).then(axios.spread((res1,res2)=>{consloe.log(res1),consloe.log(res2)}))
设置全局默认请求根路径：axios.default.baseurl=“www.baidu.com”
axios常见配置选项
请求地址
url: '/user,
请求类型
method: 'get',
请根路径
baseURL: 'http://www.mt.com/api,
请求前的数据处理
transformRequest:[function(data){],
请求后的数据处理
transformResponse: [function(data)f],
自定义的请求头
headers:{'x Requested-With':XMLHttpRequest'},
URL查询对象
params:{ id: 12 },
axios创建实例
创建实例的作用是让我们可以配置多个不同的地址请求
export default function axios(option) {
const instance = originAxios.create({
baseURL: 'http://000.000.32.32:8000',
timeout: 5000
});
return instance(option)
}})
axios拦截器
拦截器分为4种，发送请求前成功，发送请求前失败，响应成功，响应失败
在发送请求之前触发拦截器,他有俩个参数，config传入之后，对其进行处理完成后，要把config 返回return出去，才能继续执行请求
instance.interceptors.request.use(config => {
return config
}, err => {
return err
})
{总结：通常我们在请求前执行的操作有以下几条
// 1.当发送网络请求时, 在页面中添加一个loading组件, 作为动画
// 2.某些请求要求用户必须登录, 判断用户是否有token, 如果没有token跳转到login页面
// 3.对请求的参数进行序列化(看服务器是否需要序列化)
config.data = qs.stringify(config.data)}
响应拦截器
instance.interceptors.response.use(response => {
return response.data
}, err => {
console.log('来到了response拦截failure中');
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权的访问'
break
}
}
return err
})
