ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 での fetch の使用法は何ですか

es6 での fetch の使用法は何ですか

WBOY
WBOYオリジナル
2022-05-06 18:10:023063ブラウズ

es6 では、fetch はリモート リソースのリクエストを開始するために使用され、ネットワーク経由でリソースを非同期に取得するメソッドを提供します。このメソッドは BOM の window オブジェクトで定義され、Promise オブジェクトを返します。構文「fetch(url, 構成オブジェクト).then(function(response){})」。

es6 での fetch の使用法は何ですか

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 での fetch の使用法とは何ですか

fetch の基本構文

fetch(url,init).then(function(response) { } )

es6 fetch の使用方法?JavaScript

Fetch パラメーターの説明

  • fetch は 2 つのパラメータを受け取ります。1 つ目はアドレスであり必須であり、2 つ目は構成オブジェクトでありオプションです。

  • パラメータのない単純な get リクエストの場合、2 番目のパラメータは必要ありません (デフォルトは get リクエストです)。 this fetch

  • 2 番目のパラメータには、リクエスト タイプ、送信データ、ヘッダー、モードなどが含まれます。 fetch メソッドはまた、Promise オブジェクトの場合は、戻りデータを取得するために then のみを使用できます。

  • バックグラウンドから返されたデータを処理して結果を返すには、2 つの then が必要です。最初のパラメータで .text()、または return result.json() を実行すると、特定の戻り値を 2 番目のパラメータで実際に取得し、論理的に処理できます。リクエストが失敗した場合は、リクエスト データ オブジェクトを含む最初の then で判断してください。

  • Fetch API は、リクエストや応答など、HTTP パイプラインの部分にアクセスして操作するための JavaScript インターフェイス

    を提供します。また、ネットワーク全体でリソースを非同期に取得するためのシンプルかつ合理的な方法を提供するグローバル fetch() メソッドも提供します。
  • この関数は、以前は XMLHttpRequest を使用して実装されていました。 Fetch は、Service Worker などの他のテクノロジで簡単に使用できる、より優れた代替手段を提供します。 Fetch は、CORS や HTTP の拡張機能など、他の HTTP 関連の概念を定義するための単一の論理的な場所も提供します。

    Fetch API には、BOM の window オブジェクトで定義されている fetch() メソッドが用意されており、これを使用してリモート リソースのリクエストを開始できます。このメソッドは Promise オブジェクトを返し、リクエストの戻り結果を取得できるようにします。

fetch はクロスドメイン CORS のみをサポートし、JSONP スパンニングはサポートしません。

<script>
    //fetch发送数据
    //支持CORS跨域,没有办法接受jsonp数据
    function getData() {
        //支持 cors跨域url地址&#39;http://api.yytianqi.com/air?city=CH010100&key=2c5br4sgmguremgg&#39;
        //https://api.douban.com/v2/book/1220562?callback=func
       return fetch(&#39;http://localhost:3001/getdata&#39;)
            .then(function (response) {
                console.log(response);
                //promise对象返回
                return response.json();
            })
    }
    getData().then(function (data) {
        console.log(data);
    })
</script>

[関連する推奨事項:

javascript ビデオ チュートリアル

webフロントエンド## #】###

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。