【Axios】Axios的二次封装与使用

一、背景

今天对开源项目的axios请求重新进行封装，方便对接口的后期维护与管理

二、思路

2.1.未进行二次封装的使用方式

npm i axios后，直接在vue框架中的main.js引入，并在页面中试用

// main.js
import Vue from 'vue'
import axios from 'axios'
import {Message} from "element-ui"

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://127.0.0.1:8000/'
Vue.prototype.$http = axios
Vue.prototype.$message = Message

Vue.prototype.$message.error = (status, statusText) => {
  Message({
    message: status + statusText,
    type: 'error',
  })
}
Vue.prototype.$message.errorNet = () => {
  Message({
    message: 'Error: Please check the network connection!',
    type: 'error'
  })
}

new Vue({
  render: h => h(App)
}).$mount('#app')

// page页面中使用
async getGroupLists() {
    try {
        const data = await this.$http.get('/api/v1/group/schema/lists')
        if (data.status != 200) {
            this.$message.error(data.status, data.statusText)
        } else {
            this.groupLists = data.data.group
            console.log(data)
        }
    } catch (err) {
        console.log(err)
        this.$message.errorNet()
    }
}

• 优点：使用简单，可直接在页面中查看request信息
• 缺点：api过多时，容易造成混乱，不利于后期维护与管理，并且需要对error进行处理

这些缺点在二次封装后可以解决

2.2.优化

针对2.1的error处理问题，可使用axios的拦截器对请求和响应进行拦截，然后进行一些处理。如拦截请求添加token，拦截响应处理error等。

// 请求拦截处理
axios.interceptors.request.use(
	config => {
		config.headers.Authorization = window.sessionStorage.getItem('token')
		return config
	},
	error => {
		/**
		 * 请求错误处理
		 */
	}
)

// 响应拦截处理
axios.interceptors.response.use(
	response => {
		/**
		 * 响应拦截处理
		 */
	},
	error => {
		/**
		 * 响应错误处理
		 */
	}
)

2.3. 二次封装

2.3.1. 目录结构

建议在src目录下分别新建api和utils两个文件夹，在api目录下新建index.js文件，在utils目录下新建axios.js文件，如下图所示：

2.3.2.源码

• axios.js文件

import axios from "axios"
import { Message } from "element-ui"

const axiosService = axios.create({
    baseURL: "http://localhost:17913",// you can use "process.env.VUE_APP_BASE_API" too
    timeout: 3000
})

axiosService.interceptors.request.use(
    config => {
        /**
         * TODO
         * Configuration before request
         */
        // console.log(config)
        return config
    },
    error => {
        /**
         * TODO
         * do some error handling
         */
        console.log(error)
        return Promise.reject(error)
    }
)

// re request
function reRequest(err) {
    let againReq = new Promise((resolve) => {
        console.log('request:' + err.config.url + 'Request failed, re request');
        resolve();
    })
    return againReq.then(() => {
        return axiosService(err.config);
    })
}

// axios response interceptors
axiosService.interceptors.response.use(
    response => {
        const res = response.data
        /**
         * TODO
         * Data processing operation
         */
        console.log(response)
        return Promise.reject(response)
    },
    error => {
        /**
         * TODO
         * do some error handling
         * if net error, re request
         */
        console.log(error)
        Message({
            message: error.message,
            type: "error"
        })
        return Promise.reject(error)
    }
)

export default axiosService

• index.js文件

import request from '@/utils/axios'

// Some request methods
export function getGroupList() {
    return request({
        url: "/api/v1/group/schema/lists",
        method: "get",
    })
}

• 在页面中使用

import { getGroupList } from '@/api/index'

methods: {
	load() {
		getGroupList()
            .then(res => {
                console.log(res)
            })
	}
}

三、注意事项

需要特别注意axios的版本，如果版本过老，可能会产生拦截器只拦截了请求而没有拦截响应的问题。建议直接npm update进行更新，然后重新启动项目。

四、总结

axios是前端常用的一种异步通信方式，通过对它进行二次封装后，使代码耦合度降低，提高代码的可维护性，方便在与后端进行对接时，对api的维护。