Vanilla JavaScript の fetch() 関数

Apr 24 2023

fetch() の 2 番目のパラメータクラスで fetch() 関数を使用しようとすると、Web サイト上の API からデータを取得するために使用する傾向があります。https://reqres.

fetch() の 2 番目のパラメータ

クラスで関数を使おうとするとfetch()、Webサイト上のAPIからデータを取得するために使いがちです。

https://reqres.in/は、開発者がコードをテストするための API を提供する Web サイトです。開発者はさまざまな HTTP メソッドをテストし、本物の応答ではあるが偽のデータを取得できます (REQRES、2023)。この Web サイトを使用してコードを複数回テストします。

たとえば、ユーザーの名前を知るための偽のデータを次から取得できます。https://reqres.in/でfetch()。

「fetch() をテストしてデータを取得」ボタンをクリックすると、fetch は ' からデータを取得しようとします。https://reqres.in/api/users/2'GET メソッドを使用します。以下に「Janet」が追加されていることがわかります。

ただし、fetch はデータをフェッチするためだけに使用できるわけではありません。これには、フェッチ関数で実行する内容をカスタマイズできる 2 番目のパラメーターがあります。

これはオプションであるため、完全に無視しても問題ありませんが、以前と同様にデータを取得するために機能します。

2 番目のパラメータはオブジェクトである必要があります。そして、このオブジェクト内には、本文、ヘッダー、メソッドなどの複数のサブパラメータを含めることができます (MDN、2023)。

次のような例があります。

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

では、どうやって使うのでしょうか？

この例では、ユーザーが [テスト投稿] ボタンをクリックすると、アプリはユーザーの名前とジョブをサーバーに投稿します。また、ユーザーに作成時刻を知らせるために、以下のタイムスタンプが表示されます。

.catch((エラー) =>{})

ご存知のとおり、 fetch() 関数はを返しますa Promise Object。しかし、サーバーが応答せず、約束が果たされなかったらどうなるでしょうか?

エラーが発生します!

catch((error) => {})したがって、クラッシュを避けるためにエラーをキャッチするためにを使用する必要があります。

コード例を見てみましょう。

この例では、「誤って」間違ったリンクを取得してしまいました。したがって、約束は果たされず、エラーが発生します。そのため、ユーザーが [テスト投稿] ボタンをクリックすると、コンソールに「エラー!!!」が出力されます。

Response オブジェクトのさらなる使用法

エラーが発生し、Promise オブジェクトが履行されない場合の状況について説明しました。ただし、によって返された Promise オブジェクトが満たされると、 Response オブジェクトfetch()が返されます。

インスタンスのプロパティがいくつかあります (MDN、2023)。

応答OK
応答ステータス
Response.statusText
応答.url
…

Response.statusHTTP ステータスコードを返すと、ブール値Response.okを返すを使用して、フェッチが成功したかどうかを確認できます。

この例では、ユーザーが「Test Post」ボタンをクリックすると、HTTP ステータスコードと、成功したかどうかを確認するためのブール値が表示されます。

フェッチの中止

ユーザーは、を使用してフェッチを中止することもできますAbortController Object。

別途作成する必要がありますAbortController Object。

let controller = new AbortController();

したがって、新しい 2 番目のパラメータは次のようになります。

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

abort() を実行する間隔を設定します。したがって、最初に中止をクリックすると、Test Post がコンソールに AbortError をスローします。また、HTTP ステータスとコードは、以前のように [テスト投稿] ボタンの下に表示されません。

参照

MDN。（2023年）。Fetch() — Web API: MDN。Web API | MDN。2023 年 3 月 31 日に取得、以下からhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

必要です。（2023年）。Ajax リクエストに応答する準備ができているホスト型 REST API。必要です。2023 年 3 月 31 日に取得、以下からhttps://reqres.in/

MDN。（2023年）。応答 — Web API: MDN。Web API | MDN。2023 年 3 月 31 日に取得、以下からhttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN。（2023年）。アボートコントローラー — Web API: MDN。Web API | MDN。2023 年 3 月 31 日に取得、以下からhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController