一直在用ajax,在到后來的axios,都是使用XMLHttpRequest去進行整體操作,整體過程也是那幾步.而Fetch是一套基于Promise設(shè)計出來用來處理異步請求的新的API,現(xiàn)在已經(jīng)在很多的框架中使用.
1.基本使用
基本使用非常簡單,使用Promise的鏈?zhǔn)綄懛?就能完成整個請求過程
fetch("fetch.php").then((response) => {
console.log(response);
return response.json();
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err);
})
整個請求過程分成兩個部分,第一部分根據(jù)對應(yīng)的request進行請求,默認(rèn)是get,如果請求正確,會返回一個response,包含了請求的一些信息,狀態(tài)等,然后會返回一個返回一個新的Promise對象,在第二個then中獲取對應(yīng)的json,catch還是捕獲異常
2.Headers
這個主要是設(shè)置請求頭,都是對請求頭添加字段,都是對請求頭進行操作,增刪改遍歷等
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.append('Accept-Encoding', 'deflate');
myHeaders.append('Content-Type', 'image/gif');
console.log(myHeaders.get('Content-Type'));
console.log(myHeaders)
for (var item of myHeaders.entries()){
console.log(item);
}
append添加鍵值對,但是直接打印Headers對象是沒有辦法看見添加的鍵值對內(nèi)容的,只能通過get(),getAll(),entries()(迭代器)去找到對應(yīng)鍵值對內(nèi)容,set()就是修改,append()如果添加一個已經(jīng)存在的鍵值對,會繼續(xù)添加,不會覆蓋掉已有的,以一個數(shù)組的形式保存,Headers提供的方法還有values(),delete()等,都是對鍵值對操作的方法,原型上還有forEach()
3.Request
設(shè)置完頭部,需要同請求一同發(fā)送給服務(wù)器,就需要設(shè)置request.Request的構(gòu)造函數(shù)需要兩個參數(shù),第一個參數(shù)可以是一個請求的URL,第二個參數(shù)可選的,請求的一寫參數(shù)都可以進行設(shè)置
1.method:請求方式,GET,POST,默認(rèn)是GET
2.headers:請求頭,可以是Headers對象,也可以是json對象
3.cache:設(shè)置緩存方式,有幾個值,默認(rèn)是default,如果內(nèi)容沒變就從緩存里讀取,如果有變化,請求,并且更新緩存.reload:是不查看緩存,直接請求.no-store:直接請求,并且不更新緩存.
4.mode:設(shè)置請求的模式,默認(rèn)是cors,還能設(shè)置same-origin或者navigate
5.body:post請求設(shè)置的body體
var requestInit = {
headers: myHeaders,
cache: 'no-cache',
method: 'POST',
body: 'test=123&name=Tony'
}
var request = new Request("fetch.php", requestInit);
4.Response
在第一個then里打印請求返回回來的response對象
里面有很多參數(shù),比如狀態(tài)碼,url等基本狀態(tài)參數(shù),但是沒有辦法獲取到請求回來的數(shù)據(jù),如果是json的話,可以使用response.json(),這個函數(shù)會返回一個新的promise,才能促成鏈?zhǔn)綄懛?除了json(),還有blob(),可以獲取圖片等.
到了第二步的then,使用上一步返回的promise對象,獲取到前一步的結(jié)果,這個結(jié)果直接就是一個json對象,對數(shù)據(jù)的處理就可以進行了,如果整個過程報錯,會在catch捕獲
fetch整個過程簡單,方便,只要是明白promise就能知道對應(yīng)流程
