axios非常方便，但是如果在每个组件中走一遍axios流程，最终又会写出“意大利面条”式的代码。况且很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。vuex结合axios，能够很好的进行封装：
首先，配置axios拦截器，在项目src目录下建立request.js:
import axios from 'axios'import store from '@/store'
// 创建axios实例const service = axios.create({ baseURL: ' https://easy-mock.com/mock/5a45f7b3105bf467fbd51960/example', timeout: 15000 // 请求超时时间})
service.interceptors.response.use( function(response) { //请求正常则返回
return Promise.resolve(response)
}, function(error) { // 请求错误则向store commit这个状态变化
const httpError= {
hasError:true, status:error.response.status, statusText:error.response.statusText
}
store.commit('ON_HTTP_ERROR', httpError) return Promise.reject(error)
}
) export default service以上代码中，我们只对response进行了拦截，使用promise，若请求成功则resolve，若失败则向vuex提交一次状态变更，Promise | Vuex。并将返回的error作为payload进行传递。
在这里，我使用返回的error做了一个简单的封装，提取了其中的status和statusText部分，并且设置hasError为true。
以下是axios返回错误的格式：
image.png
在axios拦截器中统一捕捉错误，并commit到store的意义是非常明显的，由于vue组件共享vuex的状态变化，就可以在所有组件中监听这个变化，并根据需要进行显示。
为了演示方便，我使用了easy-mock,你可以马上去申请一个
easy-mock是一个简单方便的远程mock工具
接下来定义一个简单的store.js
import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)const state = { httpError:{ hasError:false, status:'', statusText:''
}
}const mutations = {
ON_HTTP_ERROR(state,payload){
state.httpError = payload
}
}export default new Vuex.Store({
state,
mutations
})可以看到，ON_HTTP_ERROR将payload提交来的数据保存在state的httpError，在组件中进行状态变更。
实际工程中，我们每个页面都会有很多的请求，这些请求都应该写成api，保存在api文件夹里，方便调用，而不是直接写在页面中，我们通过一个例子简单进行介绍：
工程目录src/api/下建立testApi.js文件：
import request from '@/request'export function getTest(apiRoute) { return request({ url: apiRoute, method: 'get'
})
}在这里，我们只是简单的调用了request.js，由于request.js返回的是一个axios对象，我们传入参数{ url: apiRoute, method: 'get' }来消费这个对象，注意，getTest方法返回的，依然是一个Promise对象。
在App.vue中进行测试
<template>
<div id="app">
<p style="color:red" v-show="httpError.hasError">{{httpError.status}} | {{httpError.statusText}}</p>
<button @click="httpGet">get test</button>
<p>{{reponseData}}</p>
<router-view></router-view>
</div></template><script>import { getTest } from "@/api/testApi";export default { name: "app",
data(){ return { reponseData:''
}
}, computed: {
httpError() { return this.$store.state.httpError;
}
},
methods: {
httpGet() {
getTest('mock').then(response => { this.reponseData = response.data;
});
}
}
};</script>正常返回结果
把httpGet方法的地址改一下,在后面加个s，让它返回404
httpGet() {
getTest('mocks').then(response => { this.reponseData = response.data;
});
}错误返回结果
由于我们前面在testApi中定义的getTest方法返回的依然是一个Promise对象，我们在组件中依然可以捕捉到他的rejection：
将App.vue的getTest方法改为如下：
methods: {
httpGet() {
getTest('mocks').then(response => { this.reponseData = response.data;
}).catch(error=>{ this.reponseData="发生错误，无法显示内容"
});
}
}在组件中依然可以捕捉错误
这样，我们对axios的简单封装就算完毕了，由于我们的错误显示在App.vue内，所以，只要出现http错误，在任何一个页面都会显示，就避免了在组件中一个一个捕获错误的繁重劳动。
作者：Angeladaddy
链接：https://www.jianshu.com/p/0ea02376ca90