es6中的fetch怎么用

本篇內容主要講解“es6中的fetch怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“es6中的fetch怎么用”吧!

es6中，fetch用于發起遠程資源的請求，是提供跨網絡異步獲取資源的方法；該方法被定義在BOM的window對象中，返回一個Promise對象，語法“fetch(url,配置對象).then(function(response){})”。

本教程操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6中fetch的用法是什么

fetch的基本語法

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

es6 fetch怎么使用?JavaScript

fetch的參數說明

• fetch接收兩個參數，第一個為地址且必填，第二個為配置對象可選。
  

• 如果是簡單的無參數get請求，那么可以不要第二個參數（默認為get請求）,當然也可以加上來對此fetch進行一些說明
  

• 第二個參數包含請求類型，發送數據，headers，模式等
  

• fetch方法返回的也是一個promise對象,我們只能使用then來獲取返回數據，
  

• 我們需要兩次then才能對后臺返回得到數據進行處理，在第一個then里面return result.text(), 或者 return result.json(), 然后第二個參數里面才能真正的獲取到返回的具體值，并且對其進行邏輯處理

• 如果要判斷請求是否失敗，那么請在第一次的then里面判斷，那里面為請求數據對象。

Fetch API提供了一個 JavaScript接口，用于訪問和操縱HTTP管道的部分，例如請求和響應。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。

這種功能以前是使用  XMLHttpRequest實現的。Fetch提供了一個更好的替代方法，可以很容易地被其他技術使用，例如 Service Workers。Fetch還提供了單個邏輯位置來定義其他HTTP相關概念，例如CORS和HTTP的擴展。

Fetch API提供了一個fetch()方法，它被定義在BOM的window對象中，你可以用它來發起對遠程資源的請求。 該方法返回的是一個Promise對象，讓你能夠對請求的返回結果進行檢索。

fetch只支持跨域CORS 不支持JSONP跨越

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

到此，相信大家對“es6中的fetch怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！