二次封装axios

一、request.js

目录结构  src/api/request.js

import axios from 'axios'
import { ElMessage } from 'element-plus'
import config from '../config'


const NETWORK_ERROR = '网络请求异常,请稍后再试'
//创建一个axios实例对象
const service = axios.create({
    baseURL:config.baseApi
})
//在请求之前做一些事情
service.interceptors.request.use((req)=>{
    //可以自定义header
    //jwt-token认证的时候
    return req
})

//在请求之后做一些事情
service.interceptors.response.use((res)=>{
    //解析
    const { code, data, msg } = res.data
    if(code === 200){
        return data;
    }else{
        //网络请求错误
        ElMessage.error(msg || NETWORK_ERROR)
        //Promise.reject() 方法返回一个带有拒绝原因的 Promise 对象。
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

//封装的核心函数
function request(options){
    // 传入的形式
    // {
    //     method: 'get'
    //     data:{

    //     }
    //     mock:false
    // }
    options.method = options.method || 'get'
    if(options.method.toLowerCase() === 'get'){
        options.params = options.data
    }
    //对mock处理
    let isMock = config.mock;//总开关
    if(typeof options.mock !== 'undefined'){
        isMock = options.mock;
    }
    //对线上环境做处理
    if(config.env === 'prod'){
        //不给你用到mock的机会
        service.defaults.baseURL = config.baseApi
    }else{
        service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
    }
    return service(options)
}

export default request

二、config

目录结构  src/config/index.js

/*
环境配置文件
在企业级项目里面有三个环境
开发环境
测试环境
线上环境
*/

//当前环境,若取不到默认为线上环境
const env = import.meta.env.MODE || 'prod'

const EnvConfig = {
    development:{
        baseApi: '/api',
        mockApi: 'https://www.fastmock.site/mock/b2b8f9ade3b2eee31697084b09743a08',
    },
    test:{
        baseApi: '//test.future.com/api',
        mockApi: 'https://www.fastmock.site/mock/b2b8f9ade3b2eee31697084b09743a08',
    },
    prod:{
        baseApi: '//future.com/api',
        mockApi: 'https://www.fastmock.site/mock/b2b8f9ade3b2eee31697084b09743a08',
    }
}

export default {
    env,
    //mock的总开关,
    mock: true,
    ...EnvConfig[env]
}