Fetch API：それは何であり、WordPress RESTAPIとどのように違うのか

公開: 2019-07-08

JavaScriptは、HTMLおよびCSSとともに、主要なプログラミング言語です。 Web上のほぼすべてのサイトでJavaScriptが使用されているため、総合的な開発者になりたい場合は、ネイティブのアプリケーションプログラミングインターフェイス（API）を理解することが重要です。

この投稿では、FetchAPIとその機能を紹介します。次に、WordPress REST APIとの違いについて説明し、WordPress開発でいつ使用するかを説明します。

さっそく飛び込もう！

FetchAPIの概要

すべてのAPIと同様に、FetchAPIはアプリケーション間でデータを送受信するために使用されます。その名前が示すように、主にHTTPリクエストを使用してリソースを「フェッチ」し、それらを変更するために使用されます。このように、XMLHttpRequestのように機能します。

ただし、Fetch APIは、よりクリーンなコードを使用して同じ最終結果を達成することにより、そのメソッドよりも改善されています。これは、「promises」の形式でデータを返すことによって行われます。これは、開発者が特定の順序でJavaScript関数を実行できるようにするためのコールバックに置き換わった、簡素化された読みやすいソリューションです。

基本的に、promiseは、特定のアクションが最終的に発生することを示し、実行時に次に何が発生するかについての情報を提供します。約束は常に「解決済み」（応答になります）または「拒否されました」（エラーになります）のいずれかです。

promiseが解決されると、 .thenハンドラーが指定されたアクションを実行します。 promiseが拒否された場合、代わりに.catch関数を使用してエラーメッセージが表示される場合があります。 JavaScriptは非同期であるため、これはすべて、ページの残りの部分のレンダリングを妨げることなく、バックグラウンドで行われます。

したがって、これをすべてまとめると、promiseとしてリソースを取得するAPIが得られます。次に、それらのプロミスが解決された場合は応答オブジェクトを返し、拒否された場合はエラーを返します。 .thenまたは.catchハンドラーを追加して、応答またはエラーの直後に別のアクションを実行することもできます。

簡単な例を次に示します。FetchAPIを使用して投稿のリストを取得するとします。投稿データはpromiseとして返され、それが解決されて応答オブジェクトになります。次に、 .thenハンドラーを使用して、その応答をJSONとして返します。これは、Webサイトに表示できます。ご覧のとおり、このAPIは、特に特定のアプリケーションに対して多くの可能性を提供します。

FetchAPIとWordPressRESTAPIの違い

つまり、両方がAPIであるという事実を除けば、FetchAPIとWordPressRESTAPIはほぼすべての点で異なります。主な違いは次のとおりです。

Fetch APIはデータをpromiseとして返しますが、WordPressAPIはデータをJSONとして返します。
同様に、 .thenハンドラーを使用して、 FetchAPIによって返されるデータをJSONに変換する必要があります。
Fetch APIを介して、JSON以外の形式でデータを返すことができます。
WordPress REST APIでpromiseを使用するには、APIを呼び出した後にpromiseを自分で作成する必要があります。

WordPressでFetchAPIを使用する場合は、JavaScriptコードでフェッチ関数を呼び出すだけです。その関数の後に.thenハンドラーを付けて、コンテンツにアクセスします。その後、WebサイトまたはWebアプリケーションに表示できます。

RESTAPIよりもFetchAPIを使用したい2回

代わりにWordPressREST APIを使用することで、FetchAPIでやりたいことはほぼすべて実行できます。ただし、Fetch APIは、ネイティブのWordPressAPIを介してアクセスできない便利な機能をいくつか提供します。 2つの例を見てみましょう。

1.JSONではない応答を返す

すでに述べたように、WordPress REST APIを使用すると、デフォルトでJSONデータが返されます。ただし、別の形式での回答が必要な場合があります。これをWordPressAPIで機能させるには、JSONを行のどこかで目的の形式に変換する必要があります。

一方、Fetch APIは、いくつかの異なる形式でデータを返すことができます。 JSONはおそらくFetchAPI応答の最も一般的な形式ですが、JSONを使用して、XML、HTML、プレーンテキスト、blobなどの他のさまざまな形式で応答を返すこともできます。

これを行うには、取得したコンテンツにアクセスするために使用する.thenハンドラー内で指定された応答メソッドを変更するだけです。たとえば、非常に単純化されたFetch API呼び出しの後に、応答をJSONとして返す.thenハンドラーが続きます。

 fetch（ 'https://jsonplaceholder.typicode.com/todos'）
  .then（response => response.json（））
  .then（data => console.log（JSON.stringify（data）））

したがって、代わりにデータをXMLとして返したい場合は、 response.jsonの代わりにresponse.textを使用できます。これは、WordPress RESTAPIを使用してデータを取得した後に変換を実行するよりもはるかに簡単です。

2.Promiseを使用して特定の順序で関数を実行する

さらに、WordPress REST API呼び出しへの応答でpromiseを使用する場合は、代わりにFetchAPIを使用する方が効率的です。 WordPress APIでは、リクエストとレスポンスの後に独自のPromiseを作成する必要がありますが、FetchAPIはPromiseを返します。

APIを使用してデータをリクエストしていて、JavaScript関数を使用してそのデータで他のことを実行したい場合は、FetchAPIが最適な方法かもしれません。たとえば、次の例について考えてみます。

 var eventsURL = "https://api.seatgeek.com/2/events?q=amway-center&client_id=MTI3NjI2NjF8MTUzNDYxMjQ1MS4zNA";

fetch（eventsURL）
  .then（（response）=> response.json（））
  .then（function（evnt）{
  evnt.events.map（function（event）{を返します
    var singleEvent = document.createElement（ 'li'）;
    var eventDate = document.createElement（ 'span'）;
    var newDate = moment（event.datetime_local）.format（ 'LLL'）;
    singleEvent.innerHTML = event.title;
    eventDate.innerHTML = newDate;
    append（eventlist、singleEvent）;
    append（singleEvent、eventDate）;
  }）

}）
.catch（function（error）{
  console.log（ 'フェッチ中のエラー：' + error.message）;
}）;

ここでは、サイトSeatGeekからのイベントを表示するために、FetchAPIによって返されるpromiseに.thenハンドラーを追加することでイベント関数を実行できます。約束は、あなたのコードクリーナーを維持し、より読みやすいdは、はるかに簡単にJavaScriptを使用して行うことができます。これにより、開発がより効率的かつ効果的になる可能性があります。

結論

Web開発に関して言えば、JavaScriptがなければそれほど遠くまで行くことはできません。ネイティブAPIのハンドルがあると、WebサイトまたはWebアプリケーションで使用するために変更できるリソースを簡単に取得できます。

この投稿では、WordPress RESTAPIの代わりにJavaScriptFetchAPIを使用する場合の2つの例について説明しました。

JSONではない応答を返します。 Fetch APIを使用すると、さまざまな形式でデータを返すことができますが、WordPress RESTAPIはJSONのみを返します。
promiseを使用して、特定の順序で関数を実行します。 Fetch APIはpromiseとしてデータを返すため、独自にデータを作成する必要はありません。

Fetch APIについて他に質問がありますか？ 下のコメントセクションに残してください！

記事サムネイル画像Sudowoodo / shutterstock.com