axios的基本介绍和应用

一、什么是axios？

      Axios是一个基于promise的HTTP库，类似于jQuery的ajax，可以用于浏览器和node.js。

二、axios方法

1、get——用于获取数据

//方法一
axios.get('...',{
    params:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二
axios({
    method:'get',
    url:'...',
    params:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

2、post——用于提交数据，如表单提交或文件上传

      post请求时，数据有两种格式，application/json和form-data，现在大部分情况下使用前者，后者用于文件上传。当请求格式为application/json时，使用方法如下：

//方法一（config的配置参考下面axios的配置）
axios.post('...',{
    id:1
},config).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二
axios({
    method:'post',
    url:'...',
    dara:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

      当请求格式为form-data时，使用方法如下：

var postData = {
    id:1
}
var formData = new FormData();
for(let key in postData){
    formData.append(key,postData[key]);
}
//方法一（config的配置参考下面axios的配置）
axios.post('...',formData,config).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二
axios({
    method:'post',
    url:'...',
    dara:formData
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

3、put/patch——用于更新数据

      put是将所有的数据全部推送到服务端，使用方法如下：

//方法一
axios.put('...',{
    id:1
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二
axios({
    method:'put',
    url:'...',
    dara:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

      patch只将修改的数据推送到服务端，使用方法如下： 

//方法一
axios.patch('...',{
    id:1
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二
axios({
    method:'patch',
    url:'...',
    dara:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

 4、delete——用于删除数据

//方法一，参数在URL中传输
axios.delete('...',{
    params:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法二，参数不在URL中传输
axios.delete('...',{
    data:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
//方法三
axios({
    method:'delete',
    url:'...',
    //同理，参数在URL中用params，参数不在URL中用data
    params:{
        id:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

5、并发请求——同时发送多个请求，并统一处理返回的数据

axios.all([
    axios.get('url1'),
    axios.get('url2')
]).then(
    axios.spread((res1,res2)=>{
        console.log(res1);
        console.log(res2);
    })
)

三、axios的配置

      上述方法中提到的config，即请求的配置项，既可以在每次请求时进行配置，也可以设置全局默认配置（实际开发中很少用到），如：

axios.defaults.baseUrl='http://...';

      也可以在创建实例时对实例进行配置，如： 

let instance = axios.create({
    baseUrl:'http://...',//请求的域名
    timeout:1000,//请求的超时时长，单位ms
    url:'...',//请求的地址（相对路径）
    method:'get',//请求方法
    headers:{
        token:'',
    },//请求头
    params:{},//请求参数拼接在URL上
    data:{}//请求参数放在请求体中
})
instance.get('...').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

      若同时在全局、实例和请求时设置了不同的配置项，则优先级依次升高。 

四、拦截器

      在实际项目中，有些请求需要在被处理前拦截他们。例如在登录状态下才能请求的接口，需要请求前在headers中添加token。拦截分为两种，一种是在请求之前拦截，称为请求拦截器；一种是在响应之前拦截，称为响应拦截器。同时使用两者，可以实现在请求之前显示加载动画，响应之后隐藏加载动画的效果。

1、请求拦截器

axios.interceptors.request.use(config=>{
    //发送请求前需要做什么
    //可以对之前配置的config进行修改
    return config;
},err=>{
    //请求错误的时候做什么
    //该请求还没有到达后端，返回的状态码一般以4开头，如401、404
    return Promise.reject(err);
})

2、响应拦截器

axios.interceptors.response.use(res=>{
    //请求成功后需要做什么
    //这里返回的res即为前面请求then中的res
    return res;
},err=>{
    //响应错误的时候做什么
    //这里返回的err即为前面请求catch中的err，返回的错误码一般以5开头，如500、502
    return Promise.reject(err);
})