如何检查 Api 是否被触发以及如何中止 api 如果它被触发

Question

我正在创建一个搜索页面，以搜索有关 keyup 的一些数据，每个 keyup 都会调用一个 API，但如果调用第二个 API，我想停止上一个调用。

myFunction(term) {
    const controller = new AbortController();
    const signal = controller.signal;
    controller.abort();
    var apiUrl = window.BASE_URL + '/search?param=' + term;
    console.log(apiUrl);
    this.setState({
      searching: true
    });
    return fetch(apiUrl, { credentials: 'include', signal: signal })
      .then(this.handleErrors)
      .then(response => response.json())
      .then(responseJson => {
         console.log(responseJson);
      })
      .catch(error => {
        console.error(error);
      });
  }

Answer 1

您已经向 fetch 调用提供了 signal，但是由于您在函数范围内对其进行了初始化，因此外部世界无法引用它，因此无法使用它。

所以f.ex。将其作为参数传递给您的函数：

const controller = new AbortController();
const signal = controller.signal;

myFunction(term, signal) { ... }

然后在需要时调用中止：

signal.abort()

另外请确保您没有按原样使用 IE not supported on that browser.

将信号对象存储在外部并在调用 myFunction 时重新初始化它的其他选项：

signal;

myFunction(term) {
  this.signal ? signal.abort() : false;

  const controller = new AbortController();
  this.signal = controller.signal;

  < ... >
}

Answer 2

取消之前获取请求的示例：

const controller = useRef<AbortController>() // useRef: for function component. 
// You can create a property in a class component to store this 
// (e.g. `this.controller = null` in your constructor)  

function fetchAndAbortPrevious() {
  controller.current?.abort()
  controller.current = new AbortController()
  fetch('https://cat-fact.herokuapp.com/facts', {
    signal: controller.current.signal,
  })
    .then((response) => response.json())
    .then((response) => console.log(response))
    .catch((err) => console.log('error: ', err))
}

如何检查 Api 是否被触发以及如何中止 api 如果它被触发

How to check Api is triggered or not and how to abort the api if its triggered

javascript

api

function

reactjs

ecmascript-2016