文檔： https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
fetch墊片： https://github.com/github/fetch
fetch
跨網(wǎng)絡(luò)異步獲取資源的功能以前是使用XMLHttpRequest對象實現(xiàn)的塘淑，F(xiàn)etch API提供了更好的替代方案伟恶，可以很容易的被其他技術(shù)使用（如Servise Workers）
fetch缰冤，說白了鸣剪，就是XMLHttpRequest的一種替代方案蝉衣。如果有人問你，除了Ajax獲取后臺數(shù)據(jù)之外劳景，還有沒有其他的替代方案配紫？
你就可以回答视搏，除了XMLHttpRequest對象來獲取后臺的數(shù)據(jù)之外，還可以使用一種更優(yōu)的解決方案fetch县袱。
fetch的支持性還不是很好浑娜，但是在谷歌瀏覽器中已經(jīng)支持了fetch
兼容性查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
返回promise
Fetch API提供了一個全局的fetch()方法，該方法會返回一個Promise
當(dāng)fetch請求接收到一個代表錯誤的狀態(tài)碼時（如404式散、500）筋遭，返回的Promise不會被標(biāo)記為reject，而是被標(biāo)記為resolve暴拄，但是會將response的ok屬性設(shè)置為false漓滔。只有當(dāng)網(wǎng)絡(luò)錯誤或請求被阻止時才會被標(biāo)記為reject狀態(tài)
fetch('https://127.0.0.1/125.jpg').then(function(res){
if(res.ok) {
return res.blob();
}else {
console.log('服務(wù)器響應(yīng)出錯了'); // 資源404、服務(wù)器500等
}
}).catch(function(err){
console.log('Network response was not ok.'); // 網(wǎng)絡(luò)出錯
})
fetch() 方法的兩個參數(shù)
fetch()方法接收兩個參數(shù)：第一個參數(shù)表示要獲取的資源路徑乖篷；第二個參數(shù)表示請求的配置項（可選）
fetch('https://127.0.0.1/api/articles/1/3').then(function(res){
if(res.ok) {
return res.json();
}
})
// 定義第二個參數(shù)
fetch('https://127.0.0.1/api/articles/1/3', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
token:'token'
},
cache: 'default',
mode: 'cors',
}).then(function(res){
if(res.ok) {
return res.json();
}
})
設(shè)置請求的頭信息
在POST提交的過程中响驴，一般是表單提交，可是撕蔼，經(jīng)過查詢豁鲤，發(fā)現(xiàn)默認(rèn)的提交方式是：Content-Type:text/plain;charset=UTF-8，這個顯然是不合理的,改為application/x-www-form-urlencoded
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式為表單提交
}),
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
默認(rèn)不使用 cookie
默認(rèn)情況下, fetch 不會從服務(wù)端發(fā)送或接收任何 cookies罕邀，要發(fā)送 cookies畅形，必須設(shè)置 credentials 選項
fetch('http://127.0.0.1/search/name', {
method: 'GET',
credentials: 'include' // 強(qiáng)制加入憑據(jù)頭
})
.then((res)=>{
return res.text()
})
GET請求及傳參
GET請求中如果需要傳遞參數(shù)怎么辦？這個時候诉探，只能把參數(shù)寫在URL上來進(jìn)行傳遞了日熬。
fetch('http://127.0.0.1/search?a=1&b=2', { // 在URL中寫上傳遞的參數(shù)
method: 'GET'
})
.then((res)=>{
return res.text()
})
POST 請求及傳參
POST請求的參數(shù)，放在第二個參數(shù)的body屬性中
fetch('http://127.0.0.1/searchs', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請求對象
})
.then((res)=>{
return res.text()
})
POST提交改為application/x-www-form-urlencoded
fetch('http://127.0.0.1/searchs', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式為表單提交
}),
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請求對象
})
.then((res)=>{
return res.text()
})
通過接口得到JSON數(shù)據(jù)
fetch('http://127.0.0.1/searchs', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式為表單提交
'Accept': 'application/json' // 通過頭指定肾胯，獲取的數(shù)據(jù)類型是JSON
}),
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請求對象
})
.then((res)=>{
return res.text()
})
