Fetch API 提供了一個獲取資源的介面(包括跨域請求)。任何使用過 XMLHttpRequest 的人都能輕鬆上手,但新的API提供了更強大和靈活的功能集。概念和用法Fetch 提供了對 Request 和 Response (以及其他與網路請求有關的)對象的通用定義。使之今後可以被使用到更多... ...
Fetch API 提供了一個獲取資源的介面(包括跨域請求)。任何使用
過 XMLHttpRequest 的人都能輕鬆上手,但新的API提供了更強大和
靈活的功能集。
概念和用法
Fetch 提供了對 Request 和 Response (以及其他與網路請求有關的)對象的通用定義。使
之今後可以被使用到更多地應用場景中:無論是service workers、Cache API、又或者是其他
處理請求和響應的方式,甚至是任何一種需要你自己在程式中生成響應的方式。
註意事項:
1. fetch() 必須接受一個參數——資源的路徑
2. 無論請求成功與否,它都返回一個 Promise 對象,resolve 對應請求的 Response。你也
可以傳一個可選的第二個參數init。
3. 一旦 Response 被返回,就有一些方法可以使用了,比如定義內容或者處理方法(參見 Body)
參數
Promise<Response> fetch(input[, init]);
Input:
1. String類型,URL請求
2. Object類型,new Qeuest()
Init:
1. method: get、post...
2. headers: 要添加到請求的任何標頭,包含在Headers對象或具有ByteString值的對象文字中。 請註意,某些名稱是被禁止的。
3. body: 要添加到請求中的正文,請註意,使用GET或HEAD方法的請求不能包含正文。
4. mode: 您希望用於請求的模式,例如,cors,no-cors或同源。
舉例子
const myImage = document.querySelector('img');
let myRequest = new Request('flowers.jpg');
fetch(myRequest)
.then(function(response) {
if (!response.ok) {
throw new Error('HTTP error, status = ' + response.status);
}
return response.blob();
})
.then(function(response) {
let objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
const myImage = document.querySelector('img');
let myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
const myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
let myRequest = new Request('flowers.jpg');
fetch(myRequest,myInit).then(function(response) {
...
});