vue项目中封装axios

首先，配置axios拦截器，在项目src目录下建立request.js:

import axios from 'axios'
import store from '@/store'
import { message } from 'ant-design-vue';
import { Toast } from 'ant-design-vue';
import Vue from 'vue';
import { Loading } from 'element-ui';
let loadingInstance = Loading.service({
    lock: true,
    text: '加载中......',
    background: 'rgba(0, 0, 0, 0.7)'
}); //为所有请求添加loading

// 创建axios实例
const service = axios.create({
    baseURL: 'http://192.168.101.240:3000',
    headers: {
        'Authorization': ''
    },
    timeout: 15000 // 请求超时时间
});


// 请求发出前的拦截器
service.interceptors.request.use((req) => {
    //判断本地是否存在token
    var token = store.state.token;
    if (token) {
        //为header添加token
        req.headers.Authorization = store.state.token;
    }
    return req
}, (error) => {
    return Promise.reject(error)
});


// 响应的拦截器
service.interceptors.response.use(
    function(response) {
        //请求正常则返回
        loadingInstance.close(); //关闭loading
        return Promise.resolve(response)
    },
    function(error) {
        console.log(error.response)
        if (error.response) {
            switch (error.response.status) {
                case 404:
                    message.error('404,请求找不到！');
                    break;
                case 500:
                    message.error('500,服务器错误！');
                    break;
                case 403:
                    message.error('403,认证过期！');
                case 401:
                    message.error('401,无权限！');
            }
        } else {
            message.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进行传递。

定义一个简单的store.js

import Vue from 'vue' 

export default {
    state:{
        httpError: { hasError: false, status: '', statusText: '' }
    },
    mutations:{
        ON_HTTP_ERROR (state, payload) {
          state.httpError = payload
        }
    }
}

可以看到，ON_HTTP_ERROR将payload提交来的数据保存在state的httpError，在组件中进行状态变更。

实际工程中，我们每个页面都会有很多的请求，这些请求都应该写成api，保存在api文件夹里，方便调用，而不是直接写在页面中，我们通过一个例子简单进行介绍，封装get方法：
工程目录src/api/下建立testApi.js文件：

import request from '@/request'
export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    request.get(url, {
      params: params
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

对页面中的请求进行统一管理

import { get } from './api/testApi'
const table = {
  inquire: function (paramObj) {
    return get('https://randomuser.me/api', paramObj)
  }
}
const userpath = {
  table
}
export default userpath

在组件中测试

import axios from './common/index'
Vue.prototype.$axios = axios

export default {
  mounted () {
    this.fetch()
  },
  data () {
    return {
      data: [],
      pagination: {showSizeChanger: true, showQuickJumper: true},
      loading: false,
      columns
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      })
    },
    fetch (params = {}) {
      console.log('params:', params)
      this.loading = true
      this.$axios.table.inquire({
        results: 10,
        ...params
      }).then(data => {
        console.log(data)
        const pagination = { ...this.pagination }
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = 200
        this.loading = false
        this.data = data.results
        this.pagination = pagination
      })
    }
  }
}