インストール

モジュールをインストールします 

  1. npm install @wordpress/api-fetch --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。そのような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含める必要があります。

使用法

GET

  1. import apiFetch from '@wordpress/api-fetch';
  3. apiFetch( { path: '/wp/v2/posts' } ).then( ( posts ) => {
  4.    console.log( posts );
  5. } );

クエリ引数付きGET

  1. import apiFetch from '@wordpress/api-fetch';
  2. import { addQueryArgs } from '@wordpress/url';
  4. const queryParams = { include: [1,2,3] }; // Return posts with ID = 1,2,3.
  6. apiFetch( { path: addQueryArgs( '/wp/v2/posts', queryParams ) } ).then( ( posts ) => {
  7.    console.log( posts );
  8. } );

POST

  1. apiFetch( {
  2.    path: '/wp/v2/posts/1',
  3.    method: 'POST',
  4.    data: { title: 'New Post Title' },
  5. } ).then( ( res ) => {
  6.    console.log( res );
  7. } );

オプション

  2. さらに、以下のオプションが利用可能です:
  5. #### path (文字列)
  7. `````url`````の代わりに使用されるショートハンドで、現在のサイトのREST APIルートURLに追加されます。
  10. #### url (文字列)
  12. 取得するエンドポイントへの絶対URL。
  15. #### parse (ブール値、デフォルトはtrue)
  17. `````fetch`````とは異なり、`````Promise`````の`````apiFetch`````の戻り値は解析されたJSON結果に解決されます。この動作を無効にするには、`````parse`````を`````false`````として渡します。
  20. #### data (オブジェクト)
  22. `````POST`````または`````PUT`````リクエストのみに送信されます。`````body`````の代わりに使用されるショートハンドで、JSONに文字列化されるオブジェクト値を受け入れます。  
  23.  <a name="aborting-a-request"></a>
  26. ### リクエストの中止
  28. リクエストの中止は、ネイティブの`````fetch````` APIを使用するのと同じ方法で[`````AbortController`````](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)を使用することで達成できます。  
  30. `````AbortController`````をサポートしていないレガシーブラウザの場合、次のいずれかを行うことができます：  
  32. - 中止可能にしたい場合は、`````AbortController`````の独自のポリフィルを提供します。 
  33. - 以下の例のように無視します。
  35. **例**  
  38. ``````bash
  39. const controller =
  40.    typeof AbortController === 'undefined' ? undefined : new AbortController();
  42. apiFetch( { path: '/wp/v2/posts', signal: controller?.signal } ).catch(
  43.    ( error ) => {
  44.    // If the browser doesn't support AbortController then the code below will never log.
  45.    // However, in most cases this should be fine as it can be considered to be a progressive enhancement.
  46.    if ( error.name === 'AbortError' ) {
  47.    console.log( 'Request has been aborted' );
  48.    }
  49.    }
  50. );
  52. controller?.abort();
  53. `

ミドルウェア

  2. **例**  
  5. ``````bash
  6. import apiFetch from '@wordpress/api-fetch';
  8. apiFetch.use( ( options, next ) => {
  9.    const start = Date.now();
  10.    const result = next( options );
  11.    result.then( () => {
  12.    console.log( 'The request took ' + ( Date.now() - start ) + 'ms' );
  13.    } );
  14.    return result;
  15. } );
  16. `

組み込みミドルウェア

  2. **Nonceミドルウェア**  
  5. ``````bash
  6. import apiFetch from '@wordpress/api-fetch';
  8. const nonce = 'nonce value';
  9. apiFetch.use( apiFetch.createNonceMiddleware( nonce ) );
  10. `
  2. **ルートURLミドルウェア**  
  5. ``````bash
  6. import apiFetch from '@wordpress/api-fetch';
  8. const rootURL = 'http://my-wordpress-site/wp-json/';
  9. apiFetch.use( apiFetch.createRootURLMiddleware( rootURL ) );
  10. `

カスタムフェッチハンドラー

  2. **例**  
  4. 以下の例では、[`````axios`````](https://github.com/axios/axios)を使用してすべてのリクエストを行うためのカスタムフェッチハンドラーを使用しています。  
  7. ``````bash
  8. import apiFetch from '@wordpress/api-fetch';
  9. import axios from 'axios';
  11. apiFetch.setFetchHandler( ( options ) => {
  12.    const { url, path, data, method } = options;
  14.    return axios( {
  15.    url: url || path,
  16.    method,
  17.    data,
  18.    } );
  19. } );
  20. `

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージは、https://www.npmjs.com/に公開され、https://make.wordpress.org/core/や他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要なhttps://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.mdをお読みください。