Fetch を使用して http リクエストを行う

今回は、Fetch を使用して http リクエストを行う際の 注意事項 を​​いくつか紹介します。実際のケースを見てみましょう。

従来の Ajax は XMLHttpRequest (XHR) を使用してデータを取得するリクエストを送信し、分離の原則に注意を払っていません。 Fetch API は Promise に基づいて設計されており、XHR の問題を解決するように設計されています。

XMLHttpRequest は、構成と呼び出しメソッドが非常に複雑で、設計が不十分な API です。

var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){    console.log(xhr.response);
}
xhr.onerror = function(){    console.log('xhr error');
}
xhr.send();

の使用
jsonデータの送信

fetch(url).then(function(response){    return response.json();
}).then(function(data){    console.log(data);
}).catch(function(e){    console.log('error' + e);
});

フェッチ機能

シンプルな構文、より多くの

セマンティック

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

同型フェッチを使用

フェッチ互換性

サーバーの参照互換性

fetch のネイティブ サポートは高くありませんが、一部のポリフィルは使用できます。

IE8 は es3 構文です。es5 ポリフィルを導入する必要があります: es5-shim プロミス構文をサポートします: es6-promise

fetch のポリフィル: fetch-polyfill

jsonp を使用する場合は、次の導入も必要です: fetch-jsonp

Open babel ランタイムモードでは、async/awaitを使用できます

fetch

FAQ

フェッチリクエストにはデフォルトではCookieがありません。fetch(url,{credentials: '

include

'});

を設定する必要があります。サーバーは 400、500 のエラー コードを返します。これは拒否されません。ネットワーク エラーによりリクエストが完了できない場合にのみ拒否されます。 js構文の改善。

一般的に、プロジェクトでは根本的な問題を解決するためにさまざまなライブラリが導入されるため、基本的な API の追加や拡張にはあまり注意を払わないようになり、時間が経つにつれて標準からの分離感が生まれます。将来的には、基盤となる API の変更と基本的な実装にさらに注意を払う必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

React.jsでのCSSの使用法

JSでのasync/await

以上がFetch を使用して http リクエストを行うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。