站長(zhǎng)資訊網(wǎng)
es6中，fetch用于發(fā)起遠(yuǎn)程資源的請(qǐng)求，是提供跨網(wǎng)絡(luò)異步獲取資源的方法；該方法被定義在BOM的window對(duì)象中，返回一個(gè)Promise對(duì)象，語(yǔ)法“fetch(url,配置對(duì)象).then(function(response){})”。
本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。
es6中fetch的用法是什么
fetch的基本語(yǔ)法
fetch(url,init).then(function(response) { } )
es6 fetch怎么使用?JavaScript
fetch的參數(shù)說(shuō)明
-
fetch接收兩個(gè)參數(shù)，第一個(gè)為地址且必填，第二個(gè)為配置對(duì)象可選。
-
如果是簡(jiǎn)單的無(wú)參數(shù)get請(qǐng)求，那么可以不要第二個(gè)參數(shù)（默認(rèn)為get請(qǐng)求）,當(dāng)然也可以加上來(lái)對(duì)此fetch進(jìn)行一些說(shuō)明
-
第二個(gè)參數(shù)包含請(qǐng)求類型，發(fā)送數(shù)據(jù)，headers，模式等
-
fetch方法返回的也是一個(gè)promise對(duì)象,我們只能使用then來(lái)獲取返回?cái)?shù)據(jù)，
-
我們需要兩次then才能對(duì)后臺(tái)返回得到數(shù)據(jù)進(jìn)行處理，在第一個(gè)then里面return result.text(), 或者 return result.json(), 然后第二個(gè)參數(shù)里面才能真正的獲取到返回的具體值，并且對(duì)其進(jìn)行邏輯處理
-
如果要判斷請(qǐng)求是否失敗，那么請(qǐng)?jiān)诘谝淮蔚膖hen里面判斷，那里面為請(qǐng)求數(shù)據(jù)對(duì)象。
Fetch API提供了一個(gè) JavaScript接口，用于訪問(wèn)和操縱HTTP管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。
這種功能以前是使用 XMLHttpRequest實(shí)現(xiàn)的。Fetch提供了一個(gè)更好的替代方法，可以很容易地被其他技術(shù)使用，例如 Service Workers。Fetch還提供了單個(gè)邏輯位置來(lái)定義其他HTTP相關(guān)概念，例如CORS和HTTP的擴(kuò)展。
Fetch API提供了一個(gè)fetch()方法，它被定義在BOM的window對(duì)象中，你可以用它來(lái)發(fā)起對(duì)遠(yuǎn)程資源的請(qǐng)求。 該方法返回的是一個(gè)Promise對(duì)象，讓你能夠?qū)φ?qǐng)求的返回結(jié)果進(jìn)行檢索。
fetch只支持跨域CORS 不支持JSONP跨越
<script> //fetch發(fā)送數(shù)據(jù) //支持CORS跨域,沒(méi)有辦法接受jsonp數(shù)據(jù) 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對(duì)象返回 return response.json(); }) } getData().then(function (data) { console.log(data); }) </script>
【
