ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript での fetch メソッドの使用方法

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

PHPz
リリース: 2024-02-19 15:30:25
オリジナル
636 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート