HBuilderX uniapp+vue3+vite axios封装

uniapp 封装axios

注:axios必须低于0.26.0,重中之重

重点:封装axios的适配器adapter

1.安装axios

npm install axios@0.26.0

创建api文件夹

2.新建adapter.js文件

import settle from "axios/lib/core/settle"
import buildURL from "axios/lib/helpers/buildURL"
import buildFullPath from "axios/lib/core/buildFullPath"

const adapter = function(config) {
	return new Promise((resolve, reject) => {

		let fullurl = buildFullPath(config.baseURL, config.url)
		uni.request({
			method: config.method.toUpperCase(),
			url: buildURL(fullurl, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};

				settle(resolve, reject, response);
			}
		})
	})
}

export default adapter

3.新建index.js文件

import axios from "axios";
import adapter from "./adapter"

// 存储请求中的接口
const pending = [];
const instance = axios.create({
	timeout: 60000,
	headers: {
		"Content-Type": "application/json",
	},
});
// 封装的是适配器
instance.defaults.adapter = adapter;
/*
 * 增加请求拦截器
 */
instance.interceptors.request.use(
	config => {
	},
	(error) => {
		/
	}
);
/*
 * 增加响应拦截器
 */
instance.interceptors.response.use(
	(response) => {
	},
	(error) => {
	}
);

export default instance;


export const request = url => {
	return {
		
	};
};

解决问题请双击66666

相关推荐
林涧泣23 分钟前
【Uniapp-Vue3】页面和路由API-navigateTo及页面栈getCurrentPages
前端·vue.js·uni-app
Komorebi゛26 分钟前
【uniapp】获取上传视频的md5,适用于APP和H5
前端·javascript·uni-app
林涧泣31 分钟前
【Uniapp-Vue3】动态设置页面导航条的样式
前端·javascript·uni-app
林涧泣20 小时前
【Uniapp-Vue3】request各种不同类型的参数详解
前端·uni-app
WalkingWithTheWind~20 小时前
uni-app 程序打包 Android apk、安卓夜神模拟器调试运行
android·uni-app·模拟器
向明天乄21 小时前
小程序 uniapp 地图 自定义内容呈现,获取中心点,获取对角经纬度,首次获取对角经纬度
小程序·uni-app
会说法语的猪1 天前
uniapp使用uni.navigateBack返回页面时携带参数到上个页面
前端·uni-app
Li_Ning212 天前
vue3+uniapp开发鸿蒙初体验
华为·uni-app·harmonyos
林涧泣2 天前
【Uniapp-Vue3】uni-icons的安装和使用
前端·vue.js·uni-app
林涧泣2 天前
【Uniapp-Vue3】下拉刷新
前端·vue.js·uni-app