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错误，在任何一个页面都会显示，就避免了在组件中一个一个捕获错误的繁重劳动。
网友评论