axios异步请求库

一、什么是axios

axios是基于Promise的HTTP库（网络异步请求库），用来发送和处理http请求。

Promise是一种异步编程解决方案

通过axios异步请求可以得到Promise对象，将它返回的结果进行处理。

二、then函数的使用

new Promise((resolve,reject) => {

    //业务逻辑
    resolve(1);
}).then(res => {
    //代码
})

})

三、catch函数的使用（处理异常）

new Promise((resolve,reject) => {

    //业务逻辑
    resolve(1);
}).then(res => {
    //代码
}).catch(err => {

    //产生异常后执行的代码
})
})

四、如何安装axios

方式一：引用JS

<script src="./axios.min.js"></script>

方式二：使用npm/cnpm/yarn安装

npm install axios -S

安装到dependencies(生产环境)

        

npm install axios --save
npm install axios -S

安装到devDependencies(开发环境)

npm install axios --save-dev
npm install axios -D

五、如何使用axios

◆快捷使用
axios.get(url[,config])
axios.post(url[,data[,config]])
axios.delete(url[,config])

axios.put(url[,data[,config]])
axios.head(url[,config])

axios.patch(url[,data[,config]])
axios.options(url[,config])
 

GET请求

axios.get(/user',{
    params:{
        ID:12345
}
})
.then(function (response){
    console.log(response);
})
.catch(function (error){
    console.log(error);
};

POST请求

axios.post(/user',{
    firstName:'Fred',
    lastName:'Flintstone
})
.then(function (response){
    console.log(response);
})
.catch(function (error){
    console.log(error);
});

 url后面的参数是一个js对象，是需要post过去的数据。区别get请求的参数params。

六、axios请求响应拦截

• 设置自定义请求头
• 默认携带上次的cookie（主要解决用户登录的问题）
• 添加loading动画（请求发起前显示，完成后隐藏）
• 统一的错误处理

6.1 使用axios请求拦截的实现方法

1. 创建axios的实例

        const ajax = axios.create(options)

options：js对象，例如：

• headers：设置请求头
• timeout：超时的毫秒数
• data：POST/PUT/PATCH请求的数据
• params：url中的参数
• responseType：默认响应json数据

const ajax = axios.create({
    headers:{
        source:'h5'

}
})

6.2 默认携带上次的cookie

const ajax = axios.create({

    withCreaentials:true

})

6.3 添加loading动画

请求拦截

axios.interceptors.request.use(function (config) {
    //在发送请求之前做些什么
    return config;
}, function (error){
    //对请求错误做些什么
    return Promise.reject(error);

})

响应拦截

axios.interceptors.response.use(function (response){
    //对响应数据做点什么
    return response;
}function (error)
    //对响应错误做点什么
    return Promise.reject(error);
)};

6.4 统一的错误处理
 

◆400
参数错误提示
◆500/504
服务器正忙，网络异常/请求超时
◆401
未登录，跳转到登录页面