Axios 二次封装详解

Axios 二次封装详解

在前端开发中,经常需要对网络请求进行一些定制化的处理。以下是关于一个 Axios 二次封装的详细介绍。

我一般把以下代码放到utils目录下创建request.js文件,以下是部分关键代码示例:

javascript 复制代码
//引用axios实例
import axios from 'axios';
//引入配置
import config from '../api/confing';
//引入弹窗
import { ElMessage }from 'element-plus';
//引入路由,主要用于跳转
import router from '../router';
//引入缓存,主要用于token处理
import storage from './storage';

const TOKEN_INVALID = 'Token 认证失败,请重新登陆!';
const NETWORK_ERROR = '网络请求异常,请稍后重试!';

// 创建 axios 实例对象,添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
});

// 请求拦截
service.interceptors.request.use(
    config => {
        // 获取用户信息
        var userinfo = storage.getItem("userInfo"); 
        if (typeof(userinfo) == "undefined" || userinfo == '' || userinfo == null) { 
        } else {
            config.headers['token'] = userinfo.token 
        }
        return config
    },
    error => {
        console.log(error); // for debug
        return Promise.reject(error)
    }
);

// 响应拦截
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    // 示例判断代码
    if (code === 1) {
        return data
    } else if (code === 40001 || code === 40003) {
        ElMessage.error(msg);
        setTimeout(() => {
            router.push('login')
        }, 150);
        return Promise.reject(TOKEN_INVALID)
    }  else if (code == 0) {
        ElMessage.error(msg);
        // 处理特殊情况的数据
    } else {
        ElMessage.error(msg || NETWORK_ERROR);
        return Promise.reject(msg || NETWORK_ERROR)
    }
});

// 请求核心函数
function request(options) {
    options.method = options.method || 'get';
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    let isMock = config.mock; 
    if(typeof options.mock!= 'undefined'){
        isMock = options.mock;
    }
    if (config.env == 'production') {
        service.defaults.baseURL =  config.mockApi
    } else if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = isMock? config.mockApi : config.baseApi
    }
    return service(options);
}

['get', 'post', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
           ...options
        })
    }
});

export default request;

通过这样的二次封装,我们能够更加灵活和方便地进行网络请求的管理和处理,提高了开发效率和代码的可维护性。

以上就是关于这个 Axios 二次封装的简单介绍,希望对大家理解网络请求的处理有所帮助。

相关推荐
emplace_back31 分钟前
C# 集合表达式和展开运算符 (..) 详解
开发语言·windows·c#
jz_ddk37 分钟前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
萧曵 丶1 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust
xiaolang_8616_wjl1 小时前
c++文字游戏_闯关打怪2.0(开源)
开发语言·c++·开源
收破烂的小熊猫~1 小时前
《Java修仙传:从凡胎到码帝》第四章:设计模式破万法
java·开发语言·设计模式
nananaij2 小时前
【Python进阶篇 面向对象程序设计(3) 继承】
开发语言·python·神经网络·pycharm
阿蒙Amon2 小时前
为什么 12 版仍封神?《C# 高级编程》:从.NET 5 到实战架构,进阶者绕不开的必修课
开发语言·c#
无小道2 小时前
c++-引用(包括完美转发,移动构造,万能引用)
c语言·开发语言·汇编·c++
爱莉希雅&&&2 小时前
技术面试题,HR面试题
开发语言·学习·面试