Question

我正在使用搜索栏，在用户开始输入时调用API。每个按键一次，都有一个服务器请求，它返回响应。

我想在对服务器进行新调用之前拒绝之前的承诺，我该如何实现？现在我有旧的承诺回来的问题，并改变了UI，使其闪烁。

export const makeGetPlaceData = (axios, uri) => (name, country) => {
  const promise = new Promise((resolve, reject) => {
    axios.get(`${uri}?name=${name}&country=${country}`)
      .then(response => {
        setTimeout(() => resolve(response), 2000);
      })
      .catch(error => {
        console.log('rejected', error);
          reject(error);
      });

    });

    return promise;
};

使用setTimeout模拟慢速网络响应。

Answer 1

我通常在处理程序级别而不是承诺级别执行此操作。它的要点是你跟踪你已完成的呼叫数量，并且每个回叫都知道其呼叫号码。当promise得到解决时，如果回调不再是最新的，请尽早返回。

let lastCallId = 1;

function doCall() {
    var myCallId = lastCallId;
    lastCallId++;

    api.doSomething().then((data) => {
        if (myCallId !== lastCallId) return;

        // Do something with the data
    });
}

在创建新承诺之前拒绝承诺

1 个答案: