Axios 二次封装详解
在前端开发中，经常需要对网络请求进行一些定制化的处理。以下是关于一个 Axios 二次封装的详细介绍。
我一般把以下代码放到utils目录下创建request.js文件，以下是部分关键代码示例：
//引用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 debugreturn 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 二次封装的简单介绍，希望对大家理解网络请求的处理有所帮助。
