フェッチ

時には複雑な気持ちが、百回のダイディベート、非常に遠くそれらの事、昨日かのように

フェッチフェッチフェッチ

フェッチ、XMLHttpRequestの代替のスキームである
私たちは仕事、axios代わりにAJAXでそれらをフェッチ使用することができ、外部Ajaxでバックグラウンドデータを得ることに加えて

、ダウンロード：NPM WHATWGインストール糸||の追加がwhatwg- --save -fetch フェッチ
導入を： {インポートフェッチAS fetchPolyfill} から 「WHATWGフェッチ」
fetchPolyfillを使用することができ、直接
オブジェクトの戻り値が約束されフェッチ

componentDidMount（）{
     // 要求componentDidMountデータ
    fetchPolyfill最初のパラメータ：リクエストアドレス、第二のパラメータ：CI 
    
    fetchPolyfill（' アドレス/要求' 、{ 
        方法：" 要求モード" 、
        ヘッダー：{ ' コンテンツ-type '：' ファイルアプリケーション/ JSON ' } // 要求ヘッダー 
        本体：JSON.stringify（{}）// POSTリクエストが本体に、文字列に配置する必要がある 
    。}）を（（）=> { 
        RES .json（）
        // 第.then戻り値は、結果セットの未処理である
         // （種類を解決するために独自に必要）が上記書き込まれる処理JSON JSON結果セットである 
    }）。次に、（（データ）=>{ 
        にconsole.log（データ）
        // データの戻り値が取得される第.then 
    }）
     
} 
ヘッダはHTTPリクエストヘッダを発行：
資格：省略時のデフォルト、無視できるという意味は、すなわち2枚のクッキーはせずに存在しますパラメータ、
同じ - 起源、クッキーと相同の要求を意味するが、
含む、同種またはクロスドメインリクエストがクッキーもたらすかどうかを示す
ヘッダー：{資格情報：ザは、} 

：クレデンシャルヘッダパラメータに追加しなければならない「含む」、
うに、現在の要求としてクッキーにXHRなど

あなたはfetch-がマウントJSONPを使用する必要がある場合、フェッチはJSONPサポートされていないJSONP 
GETリクエスト
componentDidMount（）{ 
    のlet URL = " ポータル-API /共通/チャンネル-情報/を。7？inquirykey =＆CityId = 31である＆PRODUCTID =＆lantitude =＆経度= " 
    fetchPolyfill（ URL）// ドメイン名の後ろにすべてのアドレス
     // それはGETリクエストを設定する必要はありませんので、直接.then 
    .then（RES => res.json（））
    .then（データ => { 
      にconsole.log（データ）; // データインターフェースここ全て
    }）
  }

POST请求
需要配置要重启
componentDidMount(){
    let url1 = "/api/product/guessWhatYouLikeV322";
    fetchPolyfill(url1, {
      method: "POST",
      headers:{'Content-Type': 'application/json'},
      body: JSON.stringify({//数据在接口的最下部请求方式最下部
        deviceid: "h5",
        extend: "/api/product/guessWhatYouLikeV322",
        lang: "zh",
        os: "h5",
        param: "{'pageIndex':1}",
"%7B%22pageindex%22%3A1%2C%22isc2clist%22%3A2%2C%22hometabid%22%3A%226039dcc26ae7401191239559335de9ff%22%7D"
上面长串解析后就是{'pageIndex':1}    
        sign: "f779683c8484959386bfef8effbf61de",
        version: "3.1.0"
      })
    })
      .then(res => res.json())
      .then(data => {
        console.log(data)
      })      
}

fetch与axios的区别

1、axios在第一个.then中就可以拿到数据，
   fetch在第二个拿，第一个是未处理的结果集
2、axios是一个基于Promise的一个http request的请求方式
        既能在服务端请求也能在客户端请求数据
        服务端: 根据Http进行数据请求
        客户端: 根据XMLHttpRequest进行数据请求
        判断客户是在服务端请求的还是客户端请求的?
           使用属性 Process (只有在服务端才会有node中才会有这个属性)
           这个属性不存在肯定是在客户端
           判断window如果有那肯定是客户端
   fetch不是用XMLHttpRequest进行数据请求的
       特点:符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
            脱离了XHR，是ES规范里新的实现方式
            fetch没有办法原生监测请求的进度，而XHR可以

おすすめ