JavaScriptでのFetch()の使用例（コード）

この記事の内容は JavaScript の Fetch() の使用例 (コード) です。必要な方は参考にしていただければ幸いです。

Fetch() は、ネットワーク全体でリソースを非同期に要求する方法を提供し、要求や応答などの HTTP パイプラインの一部にアクセスして操作するために使用されます。

fetch の一般的な落とし穴:

• エラーを示す HTTP ステータス コードを受信した場合、fetch() によって返された Promise は拒否としてマークされません (たとえステータス コードは 404 または 500)。 fetch() は Promise 状態を解決済みとしてマークします (ただし、resolve は値を返しますが、OK プロパティは false に設定されます)。ネットワーク障害またはリクエストがブロックされると、拒否されたものとしてマークされます。

• fetch() はサーバーとの間で Cookie を送受信しません。 Cookie を送信するには、fetch(url, {credentials: 'include'}) オプションを設定する必要があります。
  

元の XHR リクエスト

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

フェッチ リクエスト

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

アロー関数の使用:

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

JSON ファイルを取得します。そしてコンソールに出力します。リソース パスを指定し、Response オブジェクトを返し、 json() メソッドを使用して JSON コンテンツを取得します。

fetch パラメータ

fetch() は、さまざまな構成の初期パラメータを制御するための 2 番目のオプションのパラメータを受け入れます。

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

認証情報を含むリクエスト

認証情報を含むリクエスト:

fetch('https://example.com', {
    //将credentials: 'include'添加到传递给fetch()方法的init对象
    credentials: 'include' 
})

認証情報が同じ送信元から送信される場合:

fetch('https://example.com', {
  credentials: 'same-origin'  
})

ブラウザが含まれていないことを確認してくださいリクエストには認証情報が含まれます:

fetch('https://example.com', {
  credentials: 'omit'  
})

JSON データのアップロード

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

ファイルのアップロード

Use<input type="file" />、 FormData() および fetch()

Headers

Headers コンストラクターを使用してヘッダー オブジェクトを作成します。ヘッダー オブジェクトは複数のキーと値のペアです。 :

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

コンテンツを取得できます:

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false

要約すると、Fetch の主な利点は次のとおりです:

• シンプルな構文とよりセマンティックな

• 標準の Promise 実装に基づいて、async/await をサポートします。

• 同型の利便性、isomorphic-fetch を使用します

以上がJavaScriptでのFetch()の使用例（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。