首頁  >  文章  >  web前端  >  es6fetch的用法是什麼

es6fetch的用法是什麼

WBOY
WBOY原創
2022-05-06 18:10:022987瀏覽

es6中,fetch用來發起遠端資源的請求,是提供跨網路非同步取得資源的方法;該方法被定義在BOM的window對像中,傳回一個Promise對象,語法「fetch(url,配置物件).then(function(response){})」。

es6fetch的用法是什麼

本教學操作環境: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地址&#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前端

以上是es6fetch的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn