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

1字数 687阅读 23163

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

推荐阅读更多精彩内容