**の新しいコンソールエクスペリエンスの紹介 AWS WAF**

更新されたエクスペリエンスを使用して、コンソールの任意の場所で AWS WAF 機能にアクセスできるようになりました。詳細については、[「コンソールの使用](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html)」を参照してください。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 統合 `fetch` ラッパーの使用方法
<a name="waf-js-challenge-api-fetch-wrapper"></a>

このセクションでは、統合 `fetch` ラッパーを使用する手順について説明します。

`AwsWafIntegration` 名前空間の下で `fetch` API に対する通常の `fetch` 呼び出しを変更することにより、 AWS WAF `fetch` ラッパーを使用できます。 AWS WAF ラッパーは、標準の JavaScript `fetch` API コールと同じオプションをすべてサポートし、統合のトークン処理を追加します。このアプローチは、一般的に、アプリケーションを統合する最も簡単な方法です。

**ラッパーの実装前**  
次のリスト例は、`AwsWafIntegration` `fetch` ラッパーを実装する前の標準コードを示しています。

```
const login_response = await fetch(login_url, {
	    method: 'POST',
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    body: login_body
	  });
```

**ラッパー実装後**  
次のリストは、`AwsWafIntegration` `fetch` ラッパー実装と同じコードを示しています。

```
const login_response = await AwsWafIntegration.fetch(login_url, {
	    method: 'POST',
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    body: login_body
	  });
```