共计 2571 个字符，预计需要花费 7 分钟才能阅读完成。
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 的疾速上手应用~
