axios cancel

axios 取消

使用很棒的 axios 库时简化 http 请求的取消

安装

使用 npm：

npm install axios-cancel --save

入门

axios-cancel简化了 axios v1.5 中引入的 Cancel api 的接口，该接口基于可取消的 Promise 提案

 import axios from 'axios' ;
import axiosCancel from 'axios-cancel' ;

axiosCancel ( axios , {
  debug : false // default
} ) ;

...

// Single request cancellation
const requestId = 'my_sample_request' ;
const promise = axios . get ( url , {
  requestId : requestId
} )
  . then ( ( res ) => {
    console . log ( 'resolved' ) ;
  } ) . catch ( ( thrown ) => {
    if ( axios . isCancel ( thrown ) ) {
      console . log ( 'request cancelled' ) ;
    } else {
      console . log ( 'some other reason' ) ;
    }
  } ) ;

axios . cancel ( requestId ) ;
// aborts the HTTP request and logs `request cancelled` 

示例

具有相同requestId的多个后续请求

...

const requestId = 'my_sample_request' ;
const promise1 = axios . get ( url , {
  requestId : requestId
} )
  . then ( ( res ) => {
    console . log ( 'resolved promise 1' ) ;
  } ) . catch ( ( thrown ) => {
    if ( axios . isCancel ( thrown ) ) {
      console . log ( 'request 1 cancelled' ) ;
    } else {
      console . log ( 'some other reason' ) ;
    }
  } ) ;

// another request with same `requestId`, before `promise1` resolution
const promise2 = axios . get ( url , {
  requestId : requestId
} )
  . then ( ( res ) => {
    console . log ( 'resolved promise 2' ) ;
  } ) . catch ( ( thrown ) => {
    if ( axios . isCancel ( thrown ) ) {
      console . log ( 'request 2 cancelled' ) ;
    } else {
      console . log ( 'some other reason' ) ;
    }
  } ) ;

// aborts the first HTTP request, and cancels the first promise 
// logs `request 1 cancelled`
// logs `resolved promise 2`

多个不同requestId的请求，全部取消

...

const requestId1 = 'my_sample_request_1' ;
const promise1 = axios . get ( url , {
  requestId : requestId1
} )
  . then ( ( res ) => {
    console . log ( 'resolved promise 1' ) ;
  } ) . catch ( ( thrown ) => {
    if ( axios . isCancel ( thrown ) ) {
      console . log ( 'request 1 cancelled' ) ;
    } else {
      console . log ( 'some other reason' ) ;
    }
  } ) ;

const requestId2 = 'my_sample_request_2' ;
const promise2 = axios . get ( url , {
  requestId : requestId2
} )
  . then ( ( res ) => {
    console . log ( 'resolved promise 1' ) ;
  } ) . catch ( ( thrown ) => {
    if ( axios . isCancel ( thrown ) ) {
      console . log ( 'request 2 cancelled' ) ;
    } else {
      console . log ( 'some other reason' ) ;
    }
  } ) ;

axios . cancelAll ( ) ;

// aborts all HTTP request, and cancels all promises
// logs `request 1 cancelled`
// logs `request 2 cancelled` 

方法

axiosCancel（实例：axios[，选项]）

选项

• 调试（启用日志记录）

axios.cancel(requestId: string[, Reason: string])

axios.cancelAll([原因：字符串])

执照

麻省理工学院