JavaScriptフェッチ：ガイド

バニラJavaScriptでWebリクエストを作成できることをご存知ですか？そうです、ウェブリクエストを行うためにライブラリをインストールする必要はありません。それだけではありません。古くて複雑なXMLHttpRequestツールについて話しているのではありません。

フェッチAPIを使用すると、単純な古いJavaScriptでAjaxリクエストを行うことができます。これは、データを取得したり、ウェブサーバー上のデータに変更を加えたりするための便利なツールです。

このガイドでは、フェッチAPIとは何か、APIを使用してウェブリクエストを作成する方法について説明します。 GETリクエストとPOSTリクエストの2つの例について説明します。

Fetch APIとは何ですか？

JavaScriptは、長い間ネットワークリクエストを送信することができました。 XMLHTTPRequestツールは、サーバーからデータを取得し、サーバーから情報を更新するために必要なリソースを提供しました。

このツールは効果的でしたが、使用するのも非常に冗長で複雑でした。一方、Fetchは、Webリクエストを簡単に作成できる新しい代替手段です。

フェッチAPIは、最新のすべてのブラウザでサポートされています。つまり、使い方を学べば、ウェブリクエストを行うときにブラウザの互換性について心配する必要はありません。

フェッチを使用してGETリクエストを行う方法

フェッチがどのように機能するかを説明する最良の方法は、例を示すことです。このチュートリアルでは、WebサービスJSONPlaceholderを使用します。これは、Webリクエストのテストに使用できる事前に作成されたダミーデータが付属するAPIです。

次のコードは、JSONPlaceholderから最初の投稿を取得するためのGETリクエストを作成します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

このコードは次を返します：

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

コードを分解してみましょう。最初の行では、fetch()を使用しました JSONPlaceholderAPIへのWebリクエストを開始するメソッド。次に、.then()を使用しました Webリクエストが行われた後に何をすべきかをコードに指示するメソッド。

最初の.then() メソッドでは、APIによって返された応答をJSONに変換します。これにより、データが読みやすくなります。別の.then()を使用します コンソールへの応答をログに記録するメソッド。これは、JSONPlaceholderAPIからのID1の投稿を示しています。

POSTリクエストの作成方法

フェッチAPIを使用して作成できるリクエストタイプはGETだけではありません。 POST、PUT、およびDELETEリクエストをサポートする機能もあります。これらの構文は同じなので、POSTリクエストを作成する方法という1つの例を見ていきます。

POST、PUT、またはDELETEリクエストを行う場合、通常、指定する必要のある情報は3つあります。

• リクエスト先のURL。
• リクエストを行うために使用しているメソッド（この場合はPOST）
• サーバーに送信するデータ

JSONPlaceholderAPIを使用して新しいコメントを作成するコードスニペットは次のとおりです。

const data = {
	name: "Leslie Tudor",
	email: "leslie.tudor@email.com",
	body: "This is an example post by Career Karma!",
	postId: 1
}

const options = {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
		"Content-Type": "application/json"
	}
};

fetch('https://jsonplaceholder.typicode.com/comments', options)
  .then(response => response.json())
  .then(json => console.log(json))

このコードは、新しく作成された投稿をJSON形式で返します：

{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }

このコードでは、最初にデータオブジェクトを宣言します。これにより、サーバーに送信するデータが保存されます。この場合、LeslieTudorというユーザーのコメントに関するデータを送信しています。

次に、フェッチ要求に関連付けられているオプションを格納する別のオブジェクトを宣言します。このオブジェクトは、リクエスト（POST）を行うために使用しているメソッド、送信するデータ、および送信するヘッダーを指定します。

最後に、fetch()を使用します 実際にリクエストを行う方法。最初の例のように、.then()を使用します 応答を取得してJSONに変換し、コンソールに出力するメソッド。

JavaScriptフェッチを使用してエラーを処理する方法

一部のウェブリクエストが意図したとおりに機能しないのは残念な事実です。データの構造が正しくないか、サーバーに問題がある可能性があります。これらのイベントが発生した場合に対処できるように、これらのイベントを事前に予測することが重要です。

.catch()というメソッドがあります これを使用して、コードによって返されたエラーをキャッチできます。 Promise.reject()と組み合わせる メソッド、エラーを処理するために使用できます：

fetch('https://jsonplaceholder.typicode.com/comments/999, options)
  .then(response => {
	if (response.ok) {
		console.log(response.json());
		return response.json();
	} else {
		return Promise.reject({ statusText: response.statusText })
	}
})
.catch(error => console.log("ERROR:", error.statusText));

このコードは次を返します：

"ERROR:", "Not Found"

このコードでは、response.okメソッドを使用して、リクエストが成功したかどうかを確認しています。この例では、存在しないコメント、コメント＃999を取得しようとしました。これにより、elseのコンテンツが発生します 実行されるステートメント。拒否されたpromiseを返します。このpromiseには、JSONPlaceholderAPIによって返されるエラーメッセージが含まれています。

次に、.catch()を使用しました このエラーを受け取り、コンソールに出力するステートメント。

結論

フェッチAPIを使用すると、JavaScriptでWebリクエストを簡単に作成できます。 APIはバニラJavaScriptの一部であるため、ライブラリをインストールしたり参照したりする必要はありません。さらに、フェッチAPIを使用して、GET、POST、PUT、およびDELETEリクエストを作成できます。

これで、プロの開発者のようにフェッチAPIを使用してウェブリクエストを作成する準備が整いました。