前端如何取消接口请求

创作时间:

作者:

@小白创作中心

前端如何取消接口请求

引用

来源

https://docs.pingcode.com/baike/2685994

前端取消接口请求的方法有多种，包括使用AbortController、Promise的reject方法、取消axios请求、使用第三方库等。本文将详细介绍其中一种方法，即使用AbortController。

一、使用AbortController取消接口请求

1、什么是AbortController

AbortController是一个可以用来取消Web API请求的接口。它通过信号（signal）和控制器（controller）来实现，signal对象与fetch请求关联，controller对象用来取消请求。

2、创建AbortController实例

使用AbortController非常简单，首先需要创建一个AbortController的实例，然后将其signal属性传递给fetch请求。

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

3、调用abort方法取消请求

在某个时刻，如果需要取消请求，只需调用controller的abort方法即可：

controller.abort();

二、使用Promise的reject方法取消请求

1、创建可取消的Promise

通过使用Promise的reject方法，可以创建一个可取消的Promise。虽然这种方法在实际项目中不常见，但也可以作为一种备选方案。

function cancellablePromise(promise) {
  let hasCanceled = false;
  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => (hasCanceled ? reject({ isCanceled: true }) : resolve(val)),
      error => (hasCanceled ? reject({ isCanceled: true }) : reject(error))
    );
  });
  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled = true;
    },
  };
}
const somePromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});
const { promise, cancel } = cancellablePromise(somePromise);
promise
  .then(val => console.log(val))
  .catch(error => {
    if (error.isCanceled) {
      console.log('Promise was canceled');
    } else {
      console.error('Promise error:', error);
    }
  });
// Cancel the promise before it resolves
cancel();

三、使用Axios取消请求

1、创建CancelToken

Axios是一个流行的HTTP请求库，它也支持取消请求。通过创建一个CancelToken实例，可以在需要时取消请求。

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;
axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => console.log(response.data))
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.error('Request error:', thrown);
    }
  });
// 取消请求
cancel('Operation canceled by the user.');

四、使用第三方库

1、使用Redux-Saga取消请求

Redux-Saga是一个用于管理Redux应用异步操作的中间件。通过使用Redux-Saga，可以轻松地取消请求。

import { call, put, takeLatest, cancel } from 'redux-saga/effects';
import axios from 'axios';
// Worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
   const source = axios.CancelToken.source();
   try {
      const user = yield call(axios.get, `https://api.example.com/user/${action.payload.userId}`, {
         cancelToken: source.token,
      });
      yield put({type: "USER_FETCH_SUCCEEDED", user: user.data});
   } catch (e) {
      if (axios.isCancel(e)) {
        console.log('Request canceled', e.message);
      } else {
        yield put({type: "USER_FETCH_FAILED", message: e.message});
      }
   }
}
function* mySaga() {
  const task = yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
  // 取消任务
  yield cancel(task);
}
export default mySaga;

2、使用第三方库RxJS取消请求

RxJS是一个用于处理异步事件的库。通过使用RxJS的unsubscribe方法，可以取消正在进行的请求。

import { ajax } from 'rxjs/ajax';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
const subscription = ajax.getJSON('https://api.example.com/data').pipe(
  catchError(error => {
    console.error('Request error:', error);
    return of(error);
  })
).subscribe(
  data => console.log('Data:', data),
  error => console.error('Error:', error)
);
// 取消订阅
subscription.unsubscribe();