异步搜索承诺不按顺序解决

Question

我的问题是，抓取承诺在创建前几个字符的位置创建，当前文本在创建后的最后一个承诺解决。当我更改文本时，我需要最后一个承诺来解决最新的或取消以前的待定承诺。

我希望结果总是最新的。

我查了一些搜索栏的例子，但什么也找不到。

我很确定，解决方案是保存以前的承诺，如果在创建新承诺时它仍然挂起，则取消它，但我不知道如何取消承诺。

谢谢你的帮助。

import React, {useEffect, useState, Fragment} from "react";
function TestComponent () {
const [text, setText] = useState('');
const [results, setResults] = useState([]);

useEffect(() => {
(async () => {
await getResults();
})();
}, [text]);

async function getResults() {
let resultsFromFetch = await fetch('url');
resultsFromFetch = await resultsFromFetch.json();
setResults(resultsFromFetch);
}

function onChange(evt) {
setText(evt.target.value);
}

return (
<Fragment>
<input type="text" value={text} onChange={onChange}/>
{results.map((value, index) => {
return <p key={index}>{value}</p>;
})}
</Fragment>
);
}
export default TestComponent;

注意：在我遇到的实际问题中，我不使用fetch，而是使用异步indexeddb操作。

Answer 1

我找到了一个答案，它并没有真正取消promise，但它阻止了函数设置结果。

添加一个额外的状态变量：const [cancelToken, setCancelToken] = useState(null);

更改效果：

useEffect(() => {
if (cancelToken) {
cancelToken.cancel(); // execute the cancel function of the previous search
}
let newCancelToken = {}; // create an empty object to pass into the getResults function
getResults(cancelToken);
setCancelToken(newCanelToken); // change the state variable to the new cancel token
}, [text]);

更改getResults函数：

async function getResults(newCancelToken) {
let canceled = false; // create a local canceled variable
newCancelToken.cancel = () => {
canceled = true; // change it to true when the cancel function is called
};
let resultsFromFetch = await fetch('url');
resultsFromFetch = await resultsFromFetch.json();
if (!canceled) {
setResults(resultsFromFetch); // only change the state if it is not canceled
}

}