JSフェッチポストとヘッダーの例を使用したJavaScriptフェッチAPIチュートリアル

Webアプリケーションを作成している場合は、外部データを操作する必要がある可能性があります。これは、独自のデータベース、サードパーティのAPIなどにすることができます。

1999年にAJAXが最初に登場したとき、それはWebアプリケーションを構築するためのより良い方法を私たちに示しました。AJAXはWeb開発のマイルストーンであり、Reactのような多くの最新テクノロジーの背後にあるコアコンセプトです。

AJAXの前は、マイナーな更新であってもWebページ全体を再レンダリングする必要がありました。しかし、AJAXは、バックエンドからコンテンツをフェッチし、選択したユーザーインターフェイス要素を更新する方法を提供してくれました。これは、開発者がユーザーエクスペリエンスを改善し、より大きく複雑なWebプラットフォームを構築するのに役立ちました。

RESTAPIのクラッシュコース

私たちは今、RESTfulAPIの時代にいます。簡単に言うと、REST APIを使用すると、データストアからデータをプッシュおよびプルできます。これは、データベースか、TwitterAPIのようなサードパーティのサーバーのいずれかである可能性があります。

RESTAPIにはいくつかの異なるタイプがあります。ほとんどの場合に使用するものを見てみましょう。

  • GET —API からデータを取得します。たとえば、ユーザー名に基づいてTwitterユーザーを取得します。
  • POST  —データをAPIにプッシュします。たとえば、名前、年齢、メールアドレスを使用して新しいユーザーレコードを作成します。
  • PUT  —既存のレコードを新しいデータで更新します。たとえば、ユーザーの電子メールアドレスを更新します。
  • DELETE  —レコードを削除します。たとえば、データベースからユーザーを削除します。

すべてのRESTAPIには3つの要素があります。要求、応答、およびヘッダー。

リクエスト —これは、注文の詳細を取得するための注文IDなど、APIに送信するデータです。

応答 —要求が成功/失敗した後にサーバーから返されるデータ。

ヘッダー — APIに渡される追加のメタデータで、サーバーが処理しているリクエストのタイプ(たとえば、「content-type」)を理解するのに役立ちます。

REST APIを使用する本当の利点は、複数のアプリケーションが動作する単一のAPIレイヤーを構築できることです。

Web、モバイル、およびデスクトップアプリケーションを使用して管理するデータベースがある場合、必要なのは単一のRESTAPIレイヤーだけです。

REST APIがどのように機能するかがわかったところで、RESTAPIをどのように使用できるかを見てみましょう。

XMLHttpRequest

JSONが世界を引き継ぐ前は、データ交換の主要な形式はXMLでした。XMLHttpRequest()は、XMLデータを返すAPIからデータをフェッチできるようにするJavaScript関数です。

XMLHttpRequestは、ページ全体をリロードせずにバックエンドからXMLデータをフェッチするオプションを提供しました。

この関数は、XMLのみであった当初から成長しました。現在、JSONやプレーンテキストなどの他のデータ形式をサポートしています。

プロファイルをフェッチするために、GitHubAPIへの簡単なXMLHttpRequest呼び出しを記述してみましょう。

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

上記のコードは、GETリクエストを//api.github.com/users/manishmshivaに送信して、GitHub情報をJSONでフェッチします。応答が成功した場合、次のJSONがコンソールに出力されます。

リクエストが失敗した場合、次のエラーメッセージがコンソールに出力されます。

フェッチAPI

Fetch APIは、リソースを非同期的に消費するためのXMLHttpRequestのよりシンプルで使いやすいバージョンです。Fetchを使用すると、データのキャッシュ、ストリーミング応答の読み取りなどの追加オプションを使用して、RESTAPIを操作できます。

主な違いは、Fetchはコールバックではなくpromiseで機能することです。JavaScript開発者は、promiseの導入後、コールバックから離れてきました。

複雑なアプリケーションの場合、コールバックの地獄につながるコールバックを書く習慣に簡単に陥る可能性があります。

promiseを使用すると、非同期リクエストの作成と処理が簡単になります。約束に不慣れな場合は、ここでそれらがどのように機能するかを学ぶことができます。

XMLHttpRequestの代わりにfetch()を使用した場合、前に作成した関数は次のようになります。

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

The first parameter of the Fetch function should always be the URL. Fetch then takes a second JSON object with options like method, headers, request body, and so on.

There is an important difference between the response object in XMLHttpRequest and Fetch.

XMLHttpRequest returns the data as a response while the response object from Fetch contains information about the response object itself. This includes headers, status code, etc. We call the “res.json()” function to get the data we need from the response object.

Another important difference is that the Fetch API will not throw an error if the request returns a 400 or 500 status code. It will still be marked as a successful response and passed to the ‘then’ function.

Fetch only throws an error if the request itself is interrupted. To handle 400 and 500 responses, you can write custom logic using ‘response.status’. The ‘status’ property will give you the status code of the returned response.

Great. Now that you understand how the Fetch API works, let's look at a couple more examples like passing data and working with headers.

Working with Headers

You can pass headers using the “headers” property. You can also use the headers constructor to better structure your code. But passing a JSON object to the “headers” property should work for most cases.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Passing Data to a POST Request

For a POST request, you can use the “body” property to pass a JSON string as input. Do note that the request body should be a JSON string while the headers should be a JSON object.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.