首页手记如何科学地在Vue项目中封装axios

如何科学地在Vue项目中封装axios

标签：

JavaScript Vue.js

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="发生错误，无法显示内容"
      });
    }
  }