fetch 一個獲取資源的介面,類似於 "ajax" 是基於 之上設計,舊版本IE 完全不支持,須藉助 "polyfill" 來相容 提供了對 Request 和 Response (以及其他與網路請求有關的)對象的通用定義 發送請求或者獲取資源,需要使用 window.fetch or Windo ...
fetch
- 一個獲取資源的介面,類似於ajax
- 是基於
Promise
之上設計,舊版本IE 完全不支持,須藉助 polyfill來相容 - 提供了對 Request 和 Response (以及其他與網路請求有關的)對象的通用定義
- 發送請求或者獲取資源,需要使用 window.fetch or WindowOrWorkerGlobalScope.fetch 方法。
參數
資源路徑(url string)
- 他必須接收一個需要請求的資源路徑,返回一個
promise
對象,請求成功的數據返回到Responese回調中,請求失敗的信息返回到 Request中。 - 當接收到一個代表錯誤的 HTTP狀態碼時,
fetch
返回的promise
不會被標記為reject
而會被標記為resolve
,比如狀態碼為 404,500.只有網路故障或請求被阻止時才被標記為reject
fetch('https://api.apiopen.top/musicDetails1')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson); //{code: 400, message: "404 Not Found", result: "https://api.apiopen.top/musicDetails1"}
})
fetch
預設是不會從服務端發送接收或發送任何cookie
,如果需要則必須設置 credentials,自 2017/8 起預設的credentials政策變更為same-originFirefox也在61.0b13中改變預設值
[, config]
- 配置項對象,包括所有對請求的設置
method
: 請求使用的方法,如 GET、POST。headers
: 請求的頭信息,形式為 Headers 的對象或包含 ByteString值的對象字面量。body
:
請求的body
信息:
可能是:
Blob( 表示一個不可變、原始數據的類文件對象)、
BufferSource
( 用於表示自身為ArrayBuffer或者TypedArray提供對象的對象ArrayBufferView。)、
FormData(表示表單數據的鍵值對的構造方式,經過它的數據可以使用XMLHttpRequest.send()
方法送出,本介面和此方法都相當簡單直接。如果送出時的編碼類型被設為 "multipart/form-data",它會使用和表單一樣的格式。)、
URLSearchParams (介面定義了一些實用的方法來處理 URL 的查詢字元串)
或者USVString
對象。
mode
: 請求的模式,如cors、 no-cors
或者same-origin
。credentials
: 請求的credentials
,如omit、same-origin
或者include
。為了在當前功能變數名稱內自動發送 cookie , 必須提供這個選項, 從 Chrome 50 開始, 這個屬性也可以接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
5.1 如果需要跨域請求需設置為 "include"
5.2 如果只在同域內發送cookie 則設置為 "same-origin"
5.3 如果任何情況都不發送cookie 則設置為 "omit"cache
: 請求的cache
模式:default 、 no-store 、 reload 、 no-cache 、 force-cache
或者only-if-cached
。redirect
: 可用的redirect
模式:follow
(自動重定向),error
(如果產生重定向將自動終止並且拋出一個錯誤), 或者manual
(手動處理重定向). 在Chrome中,Chrome 47之前的預設值是follow
,從 Chrome 47開始是manual
。referrer
: 一個USVString 可以是no-referrer、client
或一個URL
。預設是client
。referrerPolicy
:指定引用HTTP頭的值。可能是一個no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity
: 包括請求的 subresource integrity值 例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
const Fetch = function (url,config){
if(typeof(config) !== 'object' || config === null) return throw `Config needs to pass an object type`
let data = config || {} ;
let {method = 'GET', param = null, mode = "cors", cache = "no-cache",headers = {'Access-Control-Allow-Origin': '*',
'content-type': 'application/json'}, redirect = "follow", credentials = "include", referrer = "no-referrer"} = data;
/* // 傳輸 JSON 數據 需將 param 轉換
JSON.stringify(param)
//上傳文件 需傳輸 formData 格式
let formData = new FormData()
let fileField = document.querySelector("#myFile")
formData.append('title',"My File")
formData.append('fileField ',fileField .files[0])
*/
return fetch(url,{
method:method.toUpperCase(),
body:param,
mode,
cache,
headers,
redirect,
credentials,
}).then(res =>{
if(res.ok) return res.json()
throw new Error("Network response fail:"+res.status)
}
).catch(err=>console.error(err))
}
Fetch('https://api.apiopen.top/musicDetails1',{credentials:'omit'}).then(res =>console.log(res)).catch(err=>console.error(err))
Headers constructor
- 創建一個 headers 對象
一個 headers 對象是一個簡單的多名值對:
let content = "Hello World";
let myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
可以傳一個多維數組或者對象字面量:
let content = "Hello World";
let myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
//獲取和設置
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")); // [ ]
如果使用了一個不合法的HTTP Header屬性名,那麼Headers的方法通常都拋出 TypeError 異常。如果不小心寫入了一個不可寫的屬性,也會拋出一個 TypeError 異常。除此以外的情況,失敗了並不拋出異常。
檢查 content type 是否正確
fetch(myRequest).then(function(response) {
if(response.headers.get("content-type") === "application/json") {
return response.json().then(function(json) {
// process your JSON further
});
} else {
console.log("Oops, we haven't got JSON!");
}
});
Response 對象
fetch
返回的對象
對象中常用的屬性
- status: 響應狀態碼 如 200 404 等
- statusText:返回和狀態碼對應信息
- ok 檢查狀態碼是否 在 200-299之間,返回true or false
檢查環境支持度
if(this.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}