uniapp封装uni.request请求，实现重复接口请求中断上次请求（防抖）

1.对uni.request封装，在utils文件夹下创建request.js文件

@/utils/request.js：

javascript 复制代码

// @/utils/request.js文件

let BASE_URL = 'http://xxxxxx:8080/';


// QuestObj 存储请求对象，实现重复的请求中断上一次请求
const QuestObj = {};

const request = (options) => {
	const {
		url,
		method,
		data,
		header,
		questKey, // 重要！需要中断上次请求的接口传入唯一标识字符串，自己命名但不能重复，如'addUser'
	} = options
	return new Promise((resolve, reject) => {
		let questRes = uni.request({
			url: BASE_URL + url,
			method,
			data,
			header,
			dataType: 'String',
			success: res => {
                //这里可以对数据二次处理，如超过16位的整数经度丢失的问题
				resolve(JSON.parse(res.data));
			},
			fail: err => {
				reject(err)
			}
		})
		if (questKey) { // 重要！如果传入了唯一字符串就把请求对象存到QuestObj中方便调用
			QuestObj[questKey] = questRes;
		}
	})
}
export {
	BASE_URL,
	QuestObj, // 重要！导出请求对象
}
export default request

2.使用封装，在存放接口的文件夹中调用封装的请求

@request/user.js：

javascript 复制代码

// @request/user.js文件

import request from '@/utils/request' // 引入封装
import {
	QuestObj
} from '@/utils/request'



// 需要中断上次请求的接口传入questKey参数
export const addUser = (data, questKey) => {
	if (QuestObj && QuestObj[questKey]) QuestObj[questKey].abort(); // 重要！如果有上次请求就中断上次请求
	return request({
		url: 'user/addUser',
		method: 'post',
		data,
		questKey
	})
}

// 不需要中断的请求不传入questKey参数
export const getUser = (data) => {
	return request({
		url: 'user/getUser',
		method: 'post',
		data
	})
}

3.调用接口，可在任意页面调用以上请求

任意页面：

javascript 复制代码

// 任意页面

import {
	addUser,
    getUser,
} from '@/request/user.js'; //引入请求


// 按钮点击添加用户调用此函数，因可能多次点击，所以需要中断上次点击请求
const addUserFn = async () =>{
    let params = {
        name:'小明'
    }
    const result = await addUser(params,'addUser'); // 重要！传入唯一标识'addUser'
}


// 按钮点击查询，多次查询点击可能不需要中断上次点击请求
const addUserFn = async () =>{
    let params = {
        name:'小明'
    }
    const result = await getUser(params); //不用传唯一标识
}