preface

I encountered a problem in the project. When I sent the same request continuously, if the second request was faster than the first one, the data of the second request would actually be displayed, which would cause the inconsistency between the data and the content I selected. Solution: When sending a subsequent request, determine whether the previous request is complete (the same interface), cancel it immediately if it is not, and then send a new request. There are no more than two ways for front-end to send requests, one is to use Ajax to encapsulate the request Axios, and the other is to use the Fetch of H5 new feature to carry out the request. Next, we briefly describe how to interrupt the request for these two kinds of requests.

How to interrupt a request

Axios

  1. To interrupt an Axios request, you need to know what the underlying invocation of Axios is. Axios is wrapped based on Ajax, and the underlying call is XMLHttpRequest.

  2. Interrupt Axios If the request has been issued, the xmlHttprequest.abort () method terminates the request. When a request is terminated, its readyState is set to XMLHttprequest.unsent (0) and the request’s status is set to 0.

  3. Axios has a built-in CancelToken class, and new can be passed to a callback function that accepts a function called cancel. CancelToken will inject the CancelToken callback into the callback argument, which will be received externally using cancelCallback.

    1. The CancelToken constructor generates the cancel function

      async request() {
  try {
    if (typeof this.cancelCallback === 'function') {
        this.cancelCallback('Request interrupt')
        this.cancelCallback = null
    }
    const ret = await axios.get({
      data: {},
      cancelToken: new axios.CancelToken(callback= > this.cancelCallback = callback)
    })
  } catch (error) {
    console.log(error)
  }
}
Copy the code

    2. Canceltoken.source () generates a cancellation token

      let cancelTokenSource = null;
​
async request() {
  if (cancelTokenSource) {
      cancelTokenSource.cancel('Request interrupt')
      cancelTokenSource = null
  }
​
  const cancelToken = axios.CancelToken
  cancelTokenSource = cancelToken.source()
​
  try {
    const ret = await axios.get({
      cancelToken: cancelTokenSource.token,
      data: {}})}catch (error) {
    console.log(error)
  }
}
Copy the code

Fetch

  1. Fetch is a new addition to H5 that is not supported in earlier versions, such as IE. AbortController a controller object that allows you to abort one or more Web requests as needed.

  2. AbortController does this by passing in the signal source in the request and then using the ABORT method when the request needs to be interrupted.

  3. The AbortController class generates a source that returns a method that abort the interrupt request and a signal that matches the interrupt request.

    // 1. Create an abortController
const abortControllerObj = new AbortController()
​
// 2. Create a signal source
const signal = abortControllerObj.signal
​
/ / 3. Use
const request = async() = > {try {
    const ret = await fetch('/api/task/list', { signal })
    return ret
  } catch (error) {
    console.log(error)
  }
}
​
4 / / interrupt
abortControllerObj.abort()
Copy the code

conclusion

Interrupt request in the development requirements will inevitably encounter, if the early packaging company level request to add interrupt request function is also a function optimization. You can learn to improve your request wrapping functions. Finally, if the article is useful to you, please help to like, follow + comment. 🙏 🙏 🙏