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

2018-01-12 本文已影响1202人 Angeladaddy

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

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

猜你喜欢

热点阅读