概要Promise には、保留、解決、拒否の 3 つの状態しかありません。非同期 Promise が発行されると、待機 (保留) した後は、最終的に成功または失敗することしかできず、途中でキャンセル (中止) することはできません。 Promise に中止機能を提供するには、次の 2 つの方法があります。
手動でabortメソッドを実装するには2つのモードがあります。どちらもpromiseインターフェースを使用して間接的に実装します。 プロミスレースメソッドPromiseWithAbort = function(promise){ _abort = null とします。 Pabort = new Promise((res,rej)=>{とする _abort = function(reason ='abort !'){ console.warn(理由); rej(理由); } }); race = Promise.race([promise,Pabort]) とします。 レースを中止します。 コンソールにログ出力します。 復帰レース; } p1 = new Promise(res=>{ タイムアウトを設定します(()=>{ res('p1 成功'); },2000) }) testP = PromiseWithAbort(p1); とします。 testP.then(res=>{ console.log('成功:',res); },エラー=>{ console.log('エラー:',エラー); }) テストPを中止します。 // 結果: 拒否: 中止! 約束の再パッケージ化クラスPromiseWithAbort { コンストラクタ(fn){ _abort = null とします。 _p = new Promise((res,rej)=>{ とする fn.call(null,res,rej); _abort = function(error='abort'){ rej(error); } }) _p.abort = _abort; _p を返します。 } } testP = new PromiseWithAbort((res,rej)=>{ とする タイムアウトを設定する(() => { レス(1); },1000); }); testP.then(r=>{ コンソールにログ出力します。 },r=>{ console.log('rej:',r); }); テストPを中止します。 //結果: rej: 中止 中止コントローラ(これは DOM 仕様に属する実験的な機能であり、一部のブラウザではまだ開発中です。) AbortController インターフェイスは、必要に応じて 1 つ以上の DOM 要求を中止できるコントローラ オブジェクトを表します。 // フェッチ要求を中断する let controller = new AbortController(); シグナルを controller.signal とします。 fetch('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally',{signal}).then(r=>{ コンソールログr; }); コントローラーを中止します。 // 結果: キャッチされませんでした (promise 内) DOMException: ユーザーがリクエストを中止しました。 //Promise を中断する クラスPromiseWithAbortController { コンストラクタ(fn,{シグナル}){ if (シグナル && signal.aborted) { Promise.reject(新しいDOMException('Aborted','AbortError'))を返します。 } _p = new Promise((resolve,reject)=>{ とする fn.call(null、解決、拒否); if(シグナル){ シグナル.addEventListener('abort',()=>{ 拒否(新しいDOMException('Aborted','AbortError')); }) } }); _p を返します。 } } コントローラーを新しいAbortController()にします。 シグナルを controller.signal とします。 testP2 = new PromiseWithAbortController((r,j)=>{ とする タイムアウトを設定する(() => { r('成功'); }, 1000); }、{信号}); testP2.then(r=>{ コンソールにログ出力します。 },r=>{ console.log('rej:',r); }); コントローラーを中止します。 // 結果: rej: DOMException: 中止 Axiosプラグインにはキャンセル機能が付属しています//1. ソーストークンを使用する CancelToken は axios.CancelToken に置き換えられます。 const ソース = CancelToken.source(); axios.get('/user/12345', { キャンセルトークン: ソース.token }).catch(関数(スロー) { もし(axios.isCancel(スロー)){ console.log('リクエストがキャンセルされました', throwed.message); } それ以外 { // エラーを処理する } }); axios.post('/user/12345', { 名前: '新しい名前' }, { キャンセルトークン: ソース.token }) // リクエストをキャンセルします(メッセージパラメータはオプションです) source.cancel('ユーザーによって操作がキャンセルされました。'); //2. 送信関数を通じて CancelToken は axios.CancelToken に置き換えられます。 キャンセルする; axios.get('/user/12345', { キャンセルトークン: 新しいキャンセルトークン(関数executor(c) { // 実行関数はキャンセル関数をパラメータとして受け取ります キャンセル = c; }) }); // リクエストをキャンセルする キャンセル(); //メイン: 同じトークンを使用するリクエストはまとめてキャンセルできます Axios は現在のプロジェクトで最も頻繁に使用されているため、リクエストをキャンセルしても問題ありません。互換性上の理由から、DOM 指定の AbortController は推奨されません。自分で実装する必要がある場合は、この記事の最初の 2 つの方法 (Promise 競合方法と Promise 再パッケージ化方法) の方が安全です。 以上がJSがpromiseにabort関数を追加する方法の詳細です。JSの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: Tomcat クラスローダーの実装方法とサンプルコード
>>: MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明
一般的な CSS コードでは、UI レイアウトや互換性に関して軽微な問題が発生するだけです。しかし、...
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...
<p></p> の行間隔を設定するには、style="line-h...
1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...
リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...
この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...
序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...
目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...
1: 文字列を区切るためのストアドプロシージャを定義する 区切り文字 $$ `mess`$$ を使う...
1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...
目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...
背景少し前にブラウザカメラの取得とスキャンコード認識の機能を作りました。その際の知識ポイントと具体的...
FTP と SFTP はファイル転送プロトコルとして広く使用されています。関連する機能を開発するには...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...