fetch、URLSearchParams、Headers

fetch

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
fetch還接受Request實(shí)例對(duì)象:
https://developer.mozilla.org/zh-CN/docs/Web/API/Request/Request

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) { 
  return fetch(url, {
    body: JSON.stringify(data), // 需要驗(yàn)證header的 Content-Type
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', //同源發(fā)送cookie, include, same-origin, *omit
    headers: { 
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // 將response數(shù)據(jù) 轉(zhuǎn)為 JSON
上述代碼中
{
  headers:new Headers({});//見(jiàn)下方
  body:{},//body可以是一下任意類(lèi)型

/**
ArrayBuffer
ArrayBufferView(Uint8Array等)
Blob / File
string
URLSearchParams
FormData
*/

/**
//對(duì)應(yīng)上面的類(lèi)型,response有以下方法
arrayBuffer()
blob()
json()
text()
formData()
*/
}



//返回對(duì)象
Response.status — 整數(shù)(默認(rèn)值為200) 為response的狀態(tài)碼.
Response.statusText — 字符串(默認(rèn)值為"OK"), 該值與HTTP狀態(tài)碼消息對(duì)應(yīng).
Response.ok — 如上所示, 該屬性是來(lái)檢查response的狀態(tài)是否在200 - 299(包括200, 299)

new URLSearchParams()

var paramsString = "q=URLUtils.searchParams&topic=api";//可以是對(duì)象
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === ""; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

new Headers()

如果使用了一個(gè)不合法的HTTP Header屬性名,那么Headers的方法通常都拋出 TypeError 異常。如果不小心寫(xiě)入了一個(gè)不可寫(xiě)的屬性,也會(huì)拋出一個(gè) TypeError 異常。
https://developer.mozilla.org/en-US/docs/Web/API/Headers/Headers

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
//也可以傳一個(gè)多維數(shù)組或者對(duì)象字面量:

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});
//設(shè)置與讀取
console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
 
console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 
myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容