只让最后一个 API 调用通过

Question

所以，我有这个输入框，当您在其中输入内容时，它会对我们的后端进行 API 调用，我遇到的问题是：

假设我们正在输入测试，我将对此进行 4 次调用：

• t
• 特
• tes
• 测试

因为 't' 的调用比 'test' 需要更长的时间，所以来自 't' 的数据将在最后加载。这意味着我没有从“测试”获得请求的数据。

我的问题是，有什么方法可以取消之前的请求？ ('t', 'te', 'tes') 并且只让你的最后一个电话打通？或者这只是优化 API 速度的性能？

我已经尝试过半秒超时，但有时问题仍然存在。

Answer 1

使用 JavaScript 的 AbortController。它是专门为取消网络请求而实现的。

看看这个https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Answer 2

当您对用户输入进行异步调用时，异步结果解析的顺序可能不是用户输入的顺序（因此不是去抖动问题）。当用户键入s 时，您使用s 进行异步调用，然后用户键入e，您使用se 进行异步调用。现在有 2 个异步调用未解决，一个是 s，一个是 se。

假设s 调用需要一秒钟，se 调用需要 10 毫秒，然后se 首先解析并且 UI 设置为 se 的结果，但之后 s 解析并且 UI 设置为s 的结果。您现在的 UI 不一致。

解决此问题的一种方法是使用 debounce，希望您永远不会收到持续时间超过 debounce 时间的异步调用，但不能保证。另一种方法是取消较旧的请求，但实现起来太痛苦了，而且并非所有浏览器都支持。我在下面展示的方式只是在发出新请求时拒绝异步承诺。因此，当用户键入 s 和 e 请求 s 和 se 但当 s 在 se 之后解析时，它将被拒绝，因为它已被更新的请求替换。

const REPLACED = 'REPLACED';
const last = (fn) => {
  const current = { value: {} };
  return (...args) => {
    const now = {};
    current.value = now;
    return Promise.resolve(args)
      .then((args) => fn(...args))
      .then((resolve) =>
        current.value === now
          ? resolve
          : Promise.reject(REPLACED)
      );
  };
};
const later = (value, time) =>
  new Promise((resolve) =>
    setTimeout(() => resolve(value), time)
  );
const apiCall = (value) =>
  //slower when value length is 1
  value.length === 1
    ? later(value, 1000) //takes a second
    : later(value, 100); //takes 100ms
const working = last(apiCall);
const Api = ({ api, title }) => {
  const [value, setValue] = React.useState('');
  const [apiResult, setApiResult] = React.useState('');
  React.useEffect(() => {
    api(value).then((resolve) => {
      console.log(title, 'resolved with', resolve);
      setApiResult(resolve);
    });
  }, [api, title, value]);
  return (
    <div>
      <h1>{title}</h1>
      <h3>api result: {apiResult}</h3>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
};
const App = () => (
  <div>
    <Api
      api={apiCall}
      title="Broken (type 2 characters fast)"
    />
    <Api api={working} title="Working" />
  </div>
);
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>