英文:
How to ensure that I use the latest Promise()
问题
以下是翻译好的部分：
这里有三个标签。点击标签发送异步请求。我将返回的值赋给变量tagResult。
异步请求是通过Promise()实现的。当我快速点击标签时，我不想得到之前异步请求返回的值，我只想要最后一个异步请求的结果。
伪代码：
let tagResult = '';
// 当点击标签时，它会获取标签的结果
function fetchTagResult(params) {
return new Promise((resolve, reject) => {
ajax(params).then(res => resolve(res))
})
}
假设标签1、标签2、标签3分别返回1、2、3
如果我快速点击标签1、标签2、标签3，我只希望将tagResult赋值为3，永远不要赋值为1、2！
英文:
Here are three tags. Click tag to send asynchronous request. I assign the returned value to variable tagResult.
Asynchronous request is implemented by Promise(). When I click tag quickly, I don't want the value returned by the previous asynchronous request. I just want the result of the last asynchronous request.
Fake code：
let tagResult = '';
// When click the tag, it will fetch the tag result
function fetchTagResult(params) {
return new Promise((resolve, reject) => {
ajax(params).then(res => resolve(res))
})
}
Suppose tag1 tag2 tag3, return 1, 2, 3 respectively
If I quickly click tag1 tag2 tag3, I just want tagresult to be assigned to 3, NEVER assigned 1, 2!
update question: Fri Jan 03 2020 22:58:09 GMT+0800
Thanks for helping me solve my problem!
I may not have described clearly, the core of the problem is how to solve the problem of asynchronous requests, not function throttling.
Thanks again!
答案1
得分: 3
存储被点击的值在一个共享变量中。当请求完成时，将其与存储的值进行比较。如果最后的点击与当前的承诺不匹配，则拒绝承诺。
const fetchTagResult = (function () {
// IIFE for scope
let last_clicked = null;
function fetchTagResult(params, clicked) {
last_clicked = clicked;
return new Promise((resolve, reject) => {
ajax(params).then(result => {
if (clicked === last_clicked) {
resolve(result);
} else {
reject();
}
})
});
}
return fetchTagResult;
})();
这段代码可以重写以避免嵌套的承诺反模式，并使用async/await来进行一般性的整理。
const fetchTagResult = (function () {
// IIFE for scope
let last_clicked = null;
async function fetchTagResult(params, clicked) {
last_clicked = clicked;
const result = await ajax(params);
if (clicked === last_clicked) {
return result;
}
throw new Error("在此期间点击了其他内容");
}
return fetchTagResult;
})();
英文:
Store the value clicked in a shared variable. When the request resolves, compare it to the stored value. Reject the promise if the last click doesn't match the one for the current promise.
const fetchTagResult = (function () {
// IIFE for scope
let last_clicked = null;
function fetchTagResult(params, clicked) {
last_clicked = clicked;
return new Promise((resolve, reject) => {
ajax(params).then(result => {
if (clicked === last_clicked) {
resolve(result);
} else {
reject();
}
})
});
}
return fetchTagResult;
})();
This could be rewritten to avoid the nested promise antipattern, and use async/await to tidy it up in general.
const fetchTagResult = (function () {
// IIFE for scope
let last_clicked = null;
async function fetchTagResult(params, clicked) {
last_clicked = clicked;
const result = await ajax(params);
if (clicked === last_clicked) {
return result;
}
throw new Error("Something else was clicked in the meantime");
}
return fetchTagResult;
})();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论