Axios是什么
为什么要引入Ajax
为了解决浏览器在每次向服务器请求数据的时候，服务器都需要返回整个界面的数据这一个问题。产生了Ajax异步网络请求。
- Ajax(Asynchronous JavaScript and XML)：异步网络请求
- Ajax能够让页面无刷新的请求数据
实现Ajax的方法
- jQuery封装的ajax（引入jQuery小题大做）
- 原生的XMLHttpRequest（调用和配置比较繁琐）
- Axios（better）
Axios简介
这并不是一种全新的技术，本质上是对原生XMLHttpRequest的封装，并且基于Promise以及符合全新的ES规范使其可以更便捷的进行Ajax请求
可用于nodejs的HTTP客户端和浏览器
Axios的请求方式
请求的发送
执行get请求
import axios from 'axios'
axios.default.baseURL = 'http://localhost:3000/api/products'
axios.get('/user?ID=12345') //返回的是一个Promise
.then(res=>console.log(res))
.catch(err=>console.log(err));
//可配置参数的方式
axios.get('/user',{
params:{
ID:12345
}
}).then(res=>console.log(res))
.catch(err=>console.log(err));
发送post请求
axios.post('/user',{
firstName: 'simon',
lastName:'li'
}).then(res=>console.log(res))
.catch(err=>console.log(err));
发送并发请求，只要其中一个请求出错，就会停止请求
const get1 = axios.get('/user/12345');
const get2 = axios.get('/user/12345/permission');
axios.all([get1,get2])
.then(axios.spread((res1,res2)=>{
console.log(res1,res2);
}))
.catch(err=>console.log(err))
请求的响应（返回）
{
//data是服务器提供的响应
data:{},
//服务器返回的http状态码
status: 200,
//statusText是服务器返回的http状态信息
statusText: 'ok',
//heades是服务器响应中携带的headers
headers:{},
//config是axios进行的设置，目的是为了请求(request)
config:{},
}
//使用then后，response中将包含上述信息
axios.get('/user/12345').then(response={
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
请求的拦截
拦截器：可以对数据进行一些处理和过滤，但都是一些基本的判断
- 请求拦截
//添加一个请求拦截器
axios.interceptors.request.use(config=>{
//在请求之前做一些事
return config;
},err=>{
//请求错误的时候做一些事
return Promise.reject(err);
});
- 响应拦截
//添加一个响应拦截器
axios.interceptors.response.use(response=>{
//对返回的数据做一些处理
reutrn response;
},err=>{
//对返回的错误做一些处理
return Promise.reject(err);
});
其中：
请求拦截的错误拦截较少，请求拦截多为配置的拦截
响应拦截，成功一般是对数据的处理，失败一般是根据错误码跳转到提示界面
更多细节详见axios-js