axios对ajax请求进行了封装，并且使用promise的链式调用使得网络请求的代码逻辑更为清晰，同时支持async和await的编写方式使代码看起来像同步，更加方便于理解和阅读。axios这个库的体积也不大，先在项目里进行安装，npm i axios --save，然后引入就可以直接使用。
import axios from 'axios';
axios({
url: 'https://httpbin.org/post',
method: 'post', // 默认为get
data: { // post请求传递参数用data, get请求传递参数用params
name: 'macus',
age: 18
}
}).then(value=>{
// 获取请求成功的结果
console.log(value)
}).catch(error=>{
// 获取请求发送失败的结果
console.log('error', error)
})
以下图片是axios的成功响应返回的结果，可以看到返回的信息非常的多，其中data是服务器真正返回的内容，而其它的信息全都是axios提供的，其中包括请求的配置config，头部信息headers，XMLHttpRquest的响应状态
axios还提供了很多的API用于发送不同的网络请求，以上请求还可以写成以下形式，这样就不用写method属性，更为简洁一些
axios.post('https://httpbin.org/get', {
name: 'macus',
age: 18
})
还有很多其它的API
axios.get / axios.put / axios.delete / axios.request
虽然api的名字不同，其实这些api全都是调用的axios.request方法，以下为axios源码，可以看到都是调用的Axios.prototype.request
一般来说，业务的网络请求地址的域名都是固定的，可以在发送请求时定义一个baseURL
// 发送请求时定义baseURL
axios({
baseURL: 'https://httpbin.org',
url: '/post',
method: 'post', // 默认为get
data: {
name: 'macus',
age: 18
}
})
每一个请求都定义一个baseURL使得代码冗余，这里可以在全局的配置项里进行定义
// 通过axios.defaults进行全局配置
axios.defaults.baseURL = 'https://httpbin.org'
axios({
url: '/post',
method: 'post', // 默认为get
data: {
name: 'macus',
age: 18
}
})
当有多个域名用于网络请求时，定义一个默认全局的baseURL就明显不够用了，axios提供了自定义实例的方式，我们可以通过axios.create定义多个实例用于配置不同类型的网络请求，定义之后发送网络请求方式与通过axios这个实例对象去调用一致
const instance = axios.create({
baseURL: 'https://httpbin.org'
})
instance.get('/get', {
params: {
name: 'macus'
}
})
有时候，我们想对请求和响应做一些统一的处理，比如发送请求的时候展示加载的动画、检查请求参数中有没有携带token，如果没有就需要用户登录，再比如，响应报文返回的数据项太多，而我们只需要服务器返回的数据就行，那么这个时候，可以使用拦截器来对请求和响应进行通用的处理，这里再使用上面创建的instance实例对象。
// 对请求进行拦截，分别传入请求成功和失败的处理函数
instance.interceptors.request.use(config=>{
// 可以在这里进行一些逻辑处理
console.log('请求拦截了', config)
// config为请求的配置项信息，必须要有请求报文的返回
return config
}, error=>{
// 处理请求失败
})
// 对响应进行拦截，分别传入响应成功和失败的处理函数
instance.interceptors.response.use(result=>{
console.log('响应拦截了',result)
// result为响应信息，必须将响应报文进行返回
// 只需要服务器返回的data数据，可直接返回data
return result.data
}，error=>{
// 失败时的处理方式，如 404 500 等
})
目前每发送一个网络请求，都需要调用axios的实例，假如有一天这个库有bug，或者后续将项目进行优化，想使用别的库，那么有100处发送了网络请求，这100处都需要修改，这样代码的可维护性变得比较差，为了解决这样的问题，我们可以自行进行一个封装，每发送网络请求，都使用我们自定义的函数，这样后续即使想换成别的库，直接修改我们封装的函数就行，下面做一个简单封装的演示
// ajaxRequest.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000 // 超时时间
})
export function requestPost(url, data, successCallback, errorCallback){
instance({
url,
data,
method: 'post'
}).then(successCallback)
.catch(errorCallback)
}
//调用的页面
import { requestPost} from './ajaxRequest'
requestPost('/post', {name: 'kiki'}, result=>{
console.log('成功了',result)
},error=>{
console.log('失败了',error)
})
以上就是axio的快速上手使用~
