h5的fetch方法_你不需要jQuery(三)：新AJAX方法fetch()
XMLHttpRequest來(lái)完成ajax有些老而過(guò)時(shí)了。
fetch()能讓我們完成類(lèi)似 XMLHttpRequest (XHR) 提供的ajax功能。它們之間的主要區(qū)別是，Fetch API 使用了 Promises，它讓接口更簡(jiǎn)單、簡(jiǎn)潔，避免了回調(diào)的復(fù)雜性，省去了使用復(fù)雜的 XMLHttpRequest API。
如果你之前未使用過(guò) Promises，你應(yīng)該先看看《JavaScript Promises 用法》這篇文章。
基本Fetch用法
讓我們先用一個(gè)例子來(lái)比較一下使用 XMLHttpRequest 和使用 fetch 之間的不同。我們要請(qǐng)求一個(gè)URL，獲取JSON格式的返回結(jié)果。
XMLHttpRequest
一個(gè) XMLHttpRequest 請(qǐng)求需要兩個(gè)監(jiān)聽(tīng)器來(lái)捕捉 success 和 error 兩種情形，而且需要調(diào)用 open() 和 send() 方法。
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Fetch
我們的 fetch 請(qǐng)求的代碼基本上是這樣的：
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
我們首先檢查請(qǐng)求響應(yīng)的狀態(tài)是否是 200，然后才按照 JSON 對(duì)象分析響應(yīng)數(shù)據(jù)。
fetch()請(qǐng)求獲取的內(nèi)容是一個(gè) Stream 對(duì)象。也就是說(shuō)，當(dāng)我們調(diào)用 json() 方法時(shí)，返回的仍是一個(gè) Promise 對(duì)象，這是因?yàn)閷?duì) stream 的讀取也是異步的。
返回?cái)?shù)據(jù)對(duì)象的元數(shù)據(jù)(Metadata)
在上面的例子中，我看到了服務(wù)器響應(yīng)對(duì)象Response的基本狀態(tài)，以及如何轉(zhuǎn)換成JSON。返回的相應(yīng)對(duì)象Response里還有很多的元數(shù)據(jù)信息，下面是一些：
fetch('users.json').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
響應(yīng)的對(duì)象Response類(lèi)型
當(dāng)我們執(zhí)行一個(gè)fetch請(qǐng)求時(shí)，響應(yīng)的數(shù)據(jù)的類(lèi)型response.type可以是“basic”, “cors” 或 “opaque”。這些類(lèi)型用來(lái)說(shuō)明應(yīng)該如何對(duì)待這些數(shù)據(jù)和數(shù)據(jù)的來(lái)源。
當(dāng)請(qǐng)求發(fā)起自同一個(gè)域時(shí)，響應(yīng)的類(lèi)型將會(huì)是“basic”，這時(shí)，對(duì)響應(yīng)內(nèi)容的使用將沒(méi)有任何限制。
如果請(qǐng)求來(lái)自另外某個(gè)域，而且響應(yīng)的具有CORs頭信息，那么，響應(yīng)的類(lèi)型將是“cors”。 “cors” 和 “basic” 類(lèi)型的響應(yīng)基本是一樣的，區(qū)別在于，“cors”類(lèi)型的響應(yīng)限制你只能看到的頭信息包括`Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified`, 和 `Pragma`。
“opaque”類(lèi)型的響應(yīng)說(shuō)明請(qǐng)求來(lái)自另外一個(gè)域，并且不具有 CORS 頭信息。一個(gè)opaque類(lèi)型的響應(yīng)將無(wú)法被讀取，而且不能讀取到請(qǐng)求的狀態(tài)，無(wú)法看到請(qǐng)求的成功與否。當(dāng)前的 fetch() 實(shí)現(xiàn)無(wú)法執(zhí)行這樣的請(qǐng)求。原因請(qǐng)參考這篇文章。
你可以給fetch請(qǐng)求指定一個(gè)模式，要求它只執(zhí)行規(guī)定模式的請(qǐng)求。這個(gè)模式可以分為：
“same-origin” 只有來(lái)自同域的請(qǐng)求才能成功，其它的均將被拒絕。
“cors” 允許不同域的請(qǐng)求，但要求有正確的 CORs 頭信息。
“cors-with-forced-preflight” 在執(zhí)行真正的調(diào)用前先執(zhí)行preflight check。
“no-cors” 目前這種模式是無(wú)法執(zhí)行的。
定義模式的方法是，使用一個(gè)參數(shù)對(duì)象當(dāng)做fetch方法的第二個(gè)參數(shù)：
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});
串聯(lián) Promises
Promises最大的一個(gè)特征是，你可以串聯(lián)各種操作。對(duì)于fetch來(lái)說(shuō)，我們可以在各個(gè)fetch操作里共享一些邏輯操作。
在使用JSON API時(shí)，我們需要檢查每次請(qǐng)求響應(yīng)的狀態(tài)，然后解析成JSON對(duì)象。使用promise，我們可以簡(jiǎn)單的將分析狀態(tài)和解析JSON的代碼放到一個(gè)單獨(dú)函數(shù)里，然后當(dāng)做promise返回，這樣就是代碼更條理了。
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
我們用 status 函數(shù)來(lái)檢查 response.status 并返回 Promise.resolve() 或 Promise.reject() 的結(jié)果，這個(gè)結(jié)果也是一個(gè) Promise。我們的fetch() 調(diào)用鏈條中，首先如果fetch()執(zhí)行結(jié)果是 resolve，那么，接著會(huì)調(diào)用 json() 方法，這個(gè)方法返回的也是一個(gè) Promise，這樣我們就得到一個(gè)分析后的JSON對(duì)象。如果分析失敗，將會(huì)執(zhí)行reject函數(shù)和catch語(yǔ)句。
你會(huì)發(fā)現(xiàn)，在fetch請(qǐng)求中，我們可以共享一些業(yè)務(wù)邏輯，使得代碼易于維護(hù)，可讀性、可測(cè)試性更高。
用fetch執(zhí)行表單數(shù)據(jù)提交
在WEB應(yīng)用中，提交表單是非常常見(jiàn)的操作，用fetch來(lái)提交表單數(shù)據(jù)也是非常簡(jiǎn)潔。
fetch里提供了 method 和 body 參數(shù)選項(xiàng)。
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
在Fetch請(qǐng)求里發(fā)送用戶(hù)身份憑證信息
如果你想在fetch請(qǐng)求里附帶cookies之類(lèi)的憑證信息，可以將 credentials 參數(shù)設(shè)置成 “include” 值。
fetch(url, {
credentials: 'include'
})
顯而易見(jiàn)，fetch API相比起傳統(tǒng)的 XMLHttpRequest (XHR) 要簡(jiǎn)單的多，相比起jQuery里提供ajax API也絲毫不遜色。
總結(jié)
以上是生活随笔為你收集整理的h5的fetch方法_你不需要jQuery(三)：新AJAX方法fetch()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 宝塔安装sqlserver_宝塔面板fo
- 下一篇： 微星z370黑苹果_记录一下装了第二台黑