AbortControllerでfetchを中断する

2019年1月17日

AbortControllerを利用するとfetchによるリクエストを中断させることができます。

 

今回作成するのは、AbortControllerの発動までに3秒の制限時間を授けた簡単なアプリです。fetchにおいて正常な処理が返されるまでに3秒以上経過するとエラーが表示されるようにしています。

 

 

送信ボタンをクリックして3秒後にAbortErrorが表示される。

 

 

fetchによりindex.html上のフォームからtest-get.phpに値を渡し、index.htmlの<div id=”result”></div>にtest-get.phpから返ってきた値を表示させようとしていますが、test-get.phpでは故意に5秒の遅延を授けているので「AbortError」が表示されます。

 

fetchについては関連ページをご覧下さい。

fetchを利用する[GET][POST]

 

 

index.html

21,22行目

AbortControllerのインスタンスを作成しsignalを作成しています。このsignalは、fetchの第2引数に設定します(29行目)。

 

24行目

3秒経過するとfetchを中断させるabort()が発動されるようにしています。
 

 

test-post.php

6行目

POSTで値を受け取って返すまでに、5秒遅らせています。

 

 

 

参照ページ


AbortController

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー