今天请求接口的时候发现最新一次接口数据被上一次接口请求数据覆盖,原因是上一次接口用了2~3s,本次接口请求用了10ms, 导致新的数据被旧数据覆盖, 为了避免上一次请求的代码执行在本次请求之后才响应结束,使用Promise来管理异步操作。在每次请求开始时创建一个Promise对象,并在请求结束时resolve该Promise对象。然后在下一次请求开始前,检查上一次请求的Promise对象是否已经resolve,如果没有resolve,则取消上一次请求的代码执行
const examList = (examStatus = '') => {
if (lastRequestPromise) {
// 取消上一次请求的代码执行
lastRequestPromise.catch(() => console.log('上一次请求被取消'));
}
let currentRequestPromise = new Promise((resolve, reject) => {
// 异步请求
proxy.sjuRequest
.request(`接口地址`, "get", {})
.then((res) => {
const { rows = [] } = res;
describeList.value = rows.length ? rows.map(item => {
item.title = item.examName ?? '';
item.beginTime= item.beginTime
? dayjs(item.beginTime).format("YYYY-MM-DD HH:mm:ss")
: "";
return item
}): []
});
})
.catch(err => {
describeList.value = []
console.log('err', err)
})
lastRequestPromise = currentRequestPromise;
};
makeRequest函数用于模拟一个异步请求。在每次调用makeRequest函数时,会检查上一次请求的Promise对象是否已经resolve,如果没有resolve,则会输出"上一次请求被取消"。这样就可以实现在本次请求结束之后避免上一次请求的代码执行。