axios二次封装

---

前言

axios是一个强大的发送http请求的库，通过我们的二次封装可以大大提高我们的开发效率。

具体封装方法

1.我们一般会在src目录下面创建一个utils作为自己的公共方法文件夹，所有的公共方法都可以放在此处利于管理。

2.request.js具体代码

代码如下（示例）：

/**
 * axios封装
 */
import axios from 'axios'
import config from '../config/index'

// 创建axios实例对象
const service = axios.create({
    timeout: 8000,
})

// 请求拦截
service.interceptors.request.use(function (config) {
    return config
}, function (error) {
    return Promise.reject(error)
})

// 响应拦截
service.interceptors.response.use(function (response) {
    return response
}, function (error) {
    return Promise.reject(error)
})

// 请求核心函数
function request (options) {
    options.method = options.method ? options.method : 'get'
    if (options.method.toLowerCase() == 'get') { // axios中，get请求参数是params，post请求参数是data
        options.params = options.data
    }

    // mock
    if (config.env == 'production') { // 生产环境写死baseApi
        service.defaults.baseURL = config.baseApi // 注意baseURL在axios中要用service.defaults.baseURL修改
    } else { // 非生产环境，判断是否mock
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    return service(options)
}

export default request

3.config.js具体代码

/**
 * 环境配置
 */
const env = import.meta.env.MODE || 'production' // 项目运行环境
const EnvConfig = {
    development: { // 开发环境
        baseApi: 'https://www.fastmock.site/mock/e37ec4a29e6f5d05726e86afb57b1080/studyVue3',
        mockApi: 'https://www.fastmock.site/mock/e37ec4a29e6f5d05726e86afb57b1080/studyVue3'
    },
    test: { // 测试环境
        baseApi: '',
        mockApi: ''
    },
    production: { // 生产环境
        baseApi: '生产环境Api',
        mockApi: ''
    },
}
export default {
    env,
    mock: true,
    ...EnvConfig[env] // 展开运算符，遍历EnvConfig的值，复制到当前对象里
}

---

总结

以上就是axios二次封装的具体内容，包含对于axios对象的二次封装，还有一个全局配置管理的config.js的封装。内置mock，axios请求拦截器和相应拦截器，可以自行添加代码使用。

有问题欢迎评论区留言～～～