JavaScript 中断要求に対するいくつかの解決策の詳細な説明

新しい Promise((resolve, 拒否) => {
    タイムアウトを設定する(() => {
        解決('結果');
    });
}).then(res => {
    // 特定の条件が満たされた場合、呼び出しチェーンを中断するために保留中の Promise インスタンスを返します if (res === 'result') {
        新しい Promise(() => {} を返します。
    }
    console.log(res); // 印刷なし }).then(() => {
    console.log('then は実行されません'); // 印刷されません}).catch(() => {
    console.log('catch not performed'); // 印刷なし}).finally(() => {
    console.log('最終的に実行されませんでした'); // 印刷されません});

const request = new Promise((resolve, deny) => {
  タイムアウトを設定する(() => {
    解決('サーバーデータを受信しました')
  }, Math.random() * 3000)
})

const timeoutReject = (p1, タイムアウト = 2000) => {
    const p2 = new Promise((resolve, deny) => {
        タイムアウトを設定する(() => {
            拒否('ネットワークタイムアウト');
        }、 タイムアウト）;
    });
    Promise.race([p1, p2]) を返します。
};

timeoutReject(リクエスト)。その後(res => {
    コンソールログ(res);
}).catch(エラー => {
    コンソールログ(エラー);
});

関数abortWrapper(p1) {
    中止させる;
    const p2 = new Promise((resolve, deny) => {
        中止 = 拒否;
    });
    // 解決も拒否もない場合、p2 のステータスは常に保留中になります
    定数 p = Promise.race([p1, p2]);
    p.abort = 中止;
    p を返します。
}

リクエストを中止する
req.then(res => {
    コンソールログ(res);
}).catch(エラー => {
    コンソールログ(エラー);
});

タイムアウトを設定する(() => {
    // 手動で req.abort を呼び出して、p2 のステータスを [rejected] に変更します。
    req.abort('手動中止リクエスト');
}, 2000);

stream1$ = new Observable(observer => { とする
    タイムアウトをsetTimeout(() => {
        observer.next('観測可能なタイムアウト');
    }, 2000);

    戻り値 () => {
        タイムアウトをクリアします(タイムアウト);
    }
});
disposable を stream1$.subscribe(value => console.log(value)) にします。
タイムアウトを設定する(() => {
    使い捨て。購読解除();
}, 1000);

'axios' から axios をインポートします。
CancelToken は axios.CancelToken に置き換えられます。
const ソース = CancelToken.source();

axios.get('/user/12345', {
  キャンセルトークン: ソース.token
}).catch(関数(スロー) {
  もし（axios.isCancel（スロー））{
    console.log('リクエストがキャンセルされました', throwed.message);
  } それ以外 {
    // エラーを処理する
  } 
});

source.cancel('ユーザーによって操作がキャンセルされました。');

'axios' から axios をインポートします。
CancelToken は axios.CancelToken に置き換えられます。

// リクエストを中断する方法を保存するために cancel などの変数を作成します。let cancel;

axios.get('/user/12345', {
  キャンセルトークン: 新しいキャンセルトークン(関数executor(c) {
    cancel = c; // パラメータ c を cancel に割り当てる
  })
});

// cancel が関数であるかどうかを判断し、axios が CancelToken をインスタンス化したことを確認します
if (typeof cancel === 'function') {
    キャンセル（）;
    キャンセル = null;
}

'厳密な使用';

var キャンセル = require('./Cancel');

/**
 * `CancelToken` は、操作のキャンセルを要求するために使用できるオブジェクトです。
 *
 * @クラス
 * @param {Function} executor 実行者関数。
 */
関数CancelToken(エグゼキュータ) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor は関数である必要があります。');
  }

  var 解決Promise;
  this.promise = 新しいPromise(関数promiseExecutor(resolve) {
    解決の約束 = 解決します;
  });

  var トークン = this;
  実行者(関数キャンセル(メッセージ) {
    if (トークン.理由) {
      // キャンセルはすでにリクエストされています
      戻る;
    }

    token.reason = 新しいCancel(メッセージ);
    トークンを解決します。
  });
}

/**
 * キャンセルが要求された場合は `Cancel` をスローします。
 */
CancelToken.prototype.throwIfRequested = 関数throwIfRequested() {
  if (this.reason) {
    this.reason をスローします。
  }
};

/**
 * 新しい`CancelToken`と、呼び出されると、
 * `CancelToken` をキャンセルします。
 */
CancelToken.source = 関数ソース() {
  var キャンセル;
  var token = new CancelToken(function executor(c) {
    キャンセル = c;
  });
  戻る {
    トークン: トークン、
    キャンセル: キャンセル
  };
};

module.exports = キャンセルトークン;

if (config.cancelToken) {
  // キャンセル処理
  config.cancelToken.promise.then(関数onCanceled(キャンセル) {
    if (!リクエスト) {
      戻る;
    }

    リクエストを中止します。
    拒否(キャンセル);
    // クリーンアップ要求
    リクエスト = null;
  });
}