axios网络请求

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
})