axios的二次封装

1.对axios进行二次封装的原因

集中对请求后端数据的axios,在请求之前和请求之后做一些统一的处理

2.安装和引入axios

使用 npm:

 npm install axios

 3.新建utils文件夹，然后新建文件request.js

4.封装的代码

// 二次封装axios



//引入axios

import axios from "axios";

//引入路由页面

import router from "../router";



//引入环境配置

import config from "../config";



//引入element-plus中的消息提示

import { ElMessage } from 'element-plus'



const  TOKEN_ERROR = 'token认证失败,请重新登录'

const   NETWORK_ERROR = '网络请求异常,请稍后重试一下...'




//使用自定义配置新建一个 axios 实例,axios.create([config])

//创建axios的示例对象，添加配置

const service = axios.create({

    baseURL: config.baseApi,//公共接口

    timeout: 1000, //超时时间

})



//请求的拦截:可以在发请求之前可以处理一些业务

service.interceptors.request.use((req) => {

    // 一些公共的请求机制;发请求前做的一些处理

    // 获取请求头,jwt的token验证

    const header = req.headers

    if (!header.Authorization) header.Authorization = 'Jason' //附带上auth请求字段

    return req  //返回请求对象

})



//响应的拦截:当服务器数据返回以后，可以处理一些事情

service.interceptors.response.use((res) => {

    //对响应数据做点什么

    const { code, data, msg } = res.data

    //对数据状态码的判断；1**请求正在处理；2**成功；3**重定向；4**客户端错误；5**服务端错误

    if (code === 200) {

       return data //若请求返回状态码为200，直接返回data数据，不用再返回响应对象res

    } else if (code === 40001) {

        //token过期,提示消息，token认证失败

        ElMessage.error(TOKEN_ERROR)

        //在指定时间内返回登录页

        setTimeout(() => {

          router.push('/login')

        }, 1500);

     return Promise.reject(TOKEN_ERROR) 重点！需要返回一个Promise的reject对象

    } else {

        //如果以上两个都没有进去，就会走进这里，基本上是服务端错误

        //消息提示错误

        ElMessage.error(NETWORK_ERROR)

        // 对响应错误做点什么

        return Promise.reject(NETWORK_ERROR)

    }

})




//核心的request的函数



function request(options) {

    options.method = options.method || 'get'//默认为get请求方法

    if (options.method.toLowerCase() === 'get') { //如果为get请求方法，需要将data转化为params;toLowerCase()将字符串中的所有大写字符转换为小写字符。这个方法会返回一个新的字符串，原字符串不会被改变

        //统一一下，属性为data

        options.params = options.data

    }

    //重要

    //如果是生产环境，（上线部署）

    if (config.env === 'pord') {

        // 所有公共接口的baseURL，一定要是线上接口的baseApi

          service.defaults.baseURL = config.baseApi

    } else {

        //如果不是生产环境

        //所有公共接口的baseURL，是否开启mock，如果开启mock，就使用mockapi,如果没开启就使用baseApi

        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi

    }



    return service(options)//返回一个Promise对象

}



//对外暴露

export default request

5.config里是对环境的配置

新建config文件夹，新建index.js文件

6.config里的配置如下：

const env = import.meta.env.MODE || 'prod'



//配置不同的环境

const EnvConfig = {

    //开发环境

    dev: {

        baseApi: '/',



        mockApi:'https://mock................',//线上mock项目根地址

    },

    //测试环境

    test: {

        baseApi: '//test.....',

        mockApi:'https://mock...........',

    },

    //生产环境

    prod: {

        baseApi: '//future.....', //真实的接口

        mock:'https://mock...........',//线上mock项目根地址

    }

}



//对外暴露

export default {

    env,

    mock: true, //当mock为false时，请求的是真正的接口，当为true时，请求的是线上fastmock的接口

    //把EnvConfig里的数据都展开出来，展开到env数组里面

    ...EnvConfig[env]

}

7.将封装好的axios文件引入到main,js中，并挂载全局，挂载全局这里使用的是vue3的方法

import { createApp } from 'vue'



//全局引入elementplus

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

//引入路由组件并全局挂载

import router from './router'

import App from './App.vue'

//引入二次封装的axios

import request from './utils/request'

//引入封装好的config

import config from './config'

const app = createApp(App)



app.config.globalProperties.$request = request



app.use(ElementPlus).use(router).mount('#app')