二次封装axios

最新推荐文章于 2023-05-10 18:21:33 发布

DD小兄弟

最新推荐文章于 2023-05-10 18:21:33 发布

阅读量178

点赞数

分类专栏：二次封装axios 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64757356/article/details/127252451

版权

本文档介绍了如何在前端项目中对axios进行二次封装，包括在api文件夹下创建request.js并引入axios和config模块，src下新建config/index.js配置文件，api文件下创建可控制mock开关的api.js，以及如何挂载和使用这些封装好的API。

摘要由CSDN通过智能技术生成

1.api下新建request.js并引入axios和config

2.src下新建 config>index.js

3.api文件下新建api.js 可以单独控制mock的开关 true/false

4.挂载api

5. 使用

1.api下新建request.js并引入axios和config

import axios from 'axios'
import config from '../config'
import { ElMessage } from 'element-plus'
const NETWORK_ERROR = '网络请求异常，请稍后重试.....'

// 创建一个axios实例对象
const service = axios.create({
    baseURL: config.baseApi
})
// 在请求之前做一些事情

service.interceptors.request.use((req) => {
    // 可以自定义header
    // jwt-token认证的时候
    return req
})

// 在请求之后做一些事情
service.interceptors.response.user((res) => {
    const { code, data, msg} = res.data
    // 根据后端协商  视情况而定
    if (code == 200) {
        return data
    } else {
        // 网络请求错误
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

// 封装的核心函数
function request(options) {
    options.method =options.method || 'get'