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
// 发送申请时定义baseURLaxios({ 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.jsimport 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的疾速上手应用~