JavaScript での fetch メソッドの使用方法

JavaScript での fetch メソッドの使用

現代の Web 開発では、サーバーとのデータ対話は非常に一般的な要件です。このニーズを満たすために、JavaScript は fetch メソッドを提供します。これは、HTTP リクエストの送受信に役立つ強力で使いやすい API です。

fetch メソッドの基本的な使用法は次のとおりです。

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理请求错误
  });

この例では、fetch メソッドは 2 つのパラメータ (url と options) を受け入れます。 URL はリクエストを送信するアドレスで、オプションはリクエスト メソッド、リクエスト ヘッダーなど、リクエストの詳細を構成するために使用されるオプションのパラメータです。

fetch メソッドは Promise オブジェクトを返します。成功した応答は .then() メソッドで処理し、エラーは .catch() メソッドで処理できます。成功した応答では、response.json() メソッドを使用して、返されたデータを JSON 形式に解析し、解析されたデータを次の .then() メソッドに渡すことができます。

fetch メソッドを使用してサーバーからデータを取得し、それを Web ページに表示する完全な例を見てみましょう:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = item.title;
      container.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

この例では、https://api をリクエストします。 example.com/data は GET リクエストを送信し、response.json() メソッドを使用して応答データを JSON 形式に解析します。次に、データ配列をループし、各項目のタイトルを li 要素として作成し、それを id data-container を持つコンテナーに追加します。

GET リクエストに加えて、フェッチ メソッドは、POST、PUT、DELETE などの他の HTTP リクエスト メソッドもサポートします。リクエストメソッドを指定するには、options パラメータのメソッドフィールドを設定します。たとえば、POST リクエストを送信する場合は、次のように記述できます。

const options = {
  method: 'POST',
  body: JSON.stringify({ username: 'admin', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/login', options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理请求错误
  });

この例では、オプション パラメータでリクエスト メソッドを POST として指定し、データを送信する本文フィールドを設定します。 JSON形式。さらに、headers フィールドを設定してリクエスト ヘッダーを指定することもできます。

フェッチ メソッドは、ネットワーク リクエストでエラーが発生した場合にのみ拒否されることに注意してください。つまり、HTTP エラー ステータス コード (404 など) を自動的にエラーとして処理しません。特定の HTTP ステータス コードを処理する必要がある場合は、成功した応答でそれを判断できます。

要約すると、fetch メソッドは JavaScript で HTTP リクエストを送受信するための非常に便利な方法です。さまざまな HTTP リクエスト メソッドをサポートし、リクエストの詳細を設定できるほか、Promise メカニズムを使用してコードをより簡潔で読みやすくしています。フェッチ メソッドの使用法をマスターすることで、サーバーとより柔軟に対話し、Web アプリケーションにさらに多くの機能と対話型エクスペリエンスを追加できます。

(合計 8​​01 ワード)

以上がJavaScript での fetch メソッドの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。