vue3的axios请求封装

最新推荐文章于 2025-08-05 22:11:48 发布

原创最新推荐文章于 2025-08-05 22:11:48 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue3 专栏收录该内容

7 篇文章

订阅专栏

该文介绍了如何创建一个API文件夹，包含index.js、request.js和interface.js。在request.js中，利用axios和element-plus库设置了请求和响应拦截器，处理如携带token、错误提示等功能。interface.js则定义了HTTP接口，包括GET、POST、PUT和DELETE方法，用于与服务器交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建api文件夹

1、在api文件夹创建index.js

export * from './interface';

2、在api文件夹创建request.js

import axios from 'axios';
import { ElMessage } from 'element-plus';

let _global = typeof self === "undefined" ? typeof global === "undefined" ? this : global : self;
let typeOfTest = type => thing => typeof thing === type;
let isUndefined = typeOfTest('undefined');
let isContextDefined = (context) => !isUndefined(context) && context !== _global;
let { isArray } = Array;
function isPlainObject(val){
  	return val && val.constructor.name === 'Object'
}
function merge() {
	let {caseless} = isContextDefined(this) && this || {};
	let result = {};
	let assignValue = (val, key) => {
		let targetKey = caseless && findKey(result, key) || key;
		if (isPlainObject(result[targetKey]) && isPlainObject(val)) {
			result[targetKey] = merge(result[targetKey], val);
		} else if (isPlainObject(val)) {
			result[targetKey] = merge({}, val);
		} else if (isArray(val)) {
			result[targetKey] = val.slice();
		} else {
			result[targetKey] = val;
		}
	}
	for (let i = 0, l = arguments.length; i < l; i++) {
	  	arguments[i] && forEach(arguments[i], assignValue);
	}
	return result;
}
function forEach(obj, fn, {allOwnKeys = false} = {}) {
	if (obj === null || typeof obj === 'undefined') {
	  	return;
	}
	let i;
	let l;
	if (typeof obj !== 'object') {
	  	obj = [obj];
	}
	if (isArray(obj)) {
		for (i = 0, l = obj.length; i < l; i++) {
			fn.call(null, obj[i], i, obj);
		}
	} else {
		let keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
		let len = keys.length;
		let key;
		for (i = 0; i < len; i++) {
			key = keys[i];
			fn.call(null, obj[key], key, obj);
		}
	}
}

let statusText = {
	0: "请求状态为0，请求超时",
	400: "请求状态为400，服务器未能理解请求",
	404: "请求状态为404，服务器无法找到被请求的页面",
	405: "请求状态为405，请求中指定的方法不被允许",
	500: "请求状态为500，服务器遇到不可预知的情况",
	502: "请求状态为502，服务器从上游服务器收到一个无效的响应",
}
//请求拦截
let requestInterceptors = [
	cfg => {
		//携带token
		cfg.headers.Authorization = sessionStorage.getItem("token");
		//表单提交
		if(cfg.emulateJSON && isPlainObject(cfg.data)) {
			cfg.data = buildURL('', cfg.data).substr(1);
		}
		return cfg;
	}
]
//响应拦截
let responseInterceptors = [
	res => {
		return res.data;
	},
	err => {
		if(err.response){
			ElMessage.error(statusText[err.response.status]);
		}else{
			ElMessage.error(statusText[err.request.status]);
		}
		return Promise.reject(err)
	}
]
let defaults = {
	baseURL: process.env.VUE_APP_REQUEST_BASEURL,
	disableInterceptor: true,
	timeout: 5 * 60 * 1000, //请求时间，单位为毫秒，设置5分钟
}
export let serviceCreate = config => {
	let service = axios.create(merge(defaults, config));
	service.interceptors.request.use(...requestInterceptors);
	service.interceptors.response.use(...responseInterceptors);
	return service;
}
export { merge };
export let service = serviceCreate();

3、在api文件夹创建interface.js

import { serviceCreate, merge } from './request';

let http = serviceCreate({
    baseURL: process.env.NODE_ENV === 'production' ? "生产/正式环境" : "开发/本地环境",
})

//get类型（示例）
export function get(params, config) {
    return http.get('/get/getList', merge(config,{ params }));
}
//post类型（示例）
export function post(data, config) {
    return http.post('/post/postList', data, merge(config, { emulateJSON: false }));
}
//put类型（示例）
export function put(data, config) {
    return http.put('/put/putList', data, merge(config, { emulateJSON: false }));
}
//delete类型（示例）
export function del(params, config) {
    return http.delete('/del/delList', merge(config,{ params }));
}