axios cancel

アクシオスキャンセル

素晴らしい 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[, options])

オプション

• デバッグ(ロギングを有効にする)

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

axios.cancelAll([理由: string])

ライセンス

マサチューセッツ工科大学