【凡塵】---fetch---基本使用
一、fetch
fetch是一種XMLHttpRequest的一種替代方案,在工作當中除了用ajax獲取後臺資料外我們還可以使用fetch、axios來替代ajax
二、fetch的基本使用
1、npm install whatwg-fetch --save
2、import 'whatwg-fetch'
fetch(url,options).then((res)=>{
console.log(res);
},function(err){
console.log(err)
})
說明:
1、fetch的返回值是一個promise物件
2、options
method:HTTP請求方式,預設是GET
body:請求的引數
因為JSON內容是必須的,所以當設定主體時會呼叫JSON.stringify。
fetch('/xxx', {
method: 'post',
body: JSON.stringify({
username: '',
password: ''
})
});
headers:HTTP請求頭
因為一般使用JSON資料格式,所以設定ContentType為application/json
credentials:預設為omit,忽略的意思,也就是不帶cookie還有兩個引數,same-origin,意思就是同源請求帶cookie;include,表示無論跨域還是同源請求都會帶cookie
3、在.then裡面第一個回撥函式中處理response
status(number): HTTP返回的狀態碼,範圍在100-599之間
statusText(String): 伺服器返回的狀態文字描述
headers: HTTP請求返回頭
body: 返回體,這裡有處理返回體的一些方法
text(): 將返回體處理成字串型別
json(): 返回結果和 JSON.parse(responseText)一樣
blob(): 返回一個Blob,Blob物件是一個不可更改的類檔案的二進位制資料
如果請求一個XML格式檔案,則呼叫response.text。如果請求圖片,使用response.blob方法
注意:
cookie傳遞
必須在header引數裡面加上credentials: 'include',才會如xhr一樣將當前cookies帶到請求中去
例子:
fetch("/restapi/shopping/v2/banners?consumer=1&type=1&latitude=39.930321&longitude=116.217377",{
headers:{'Content-Type': 'application/json'}
}).then(response => {
return response.json()
})
.then((data)=>{
console.log(data)
})
總結:fetch與axios的區別
axios("http://xxx/xxx.json?a=123'").then((res)=>{
console.log(res)//這裡的r是響應結果
})
fetch("http://www.baidu.com").then((res)=>{
console.log(res);//是一個綜合各種方法的物件,並不是請求的資料
})
fetch返回的是一個未處理的方法集合,我們可以通過這些方法得到我們想要的資料型別。如果我們想要json格式,就執行response.json(),如果我們想要字串就response.text()
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特徵:
從瀏覽器中建立 XMLHttpRequest
從 node.js 發出 http 請求
支援 Promise API
攔截請求和響應
轉換請求和響應資料
自動轉換JSON資料
客戶端支援防止CSRF/XSRF
fetch:
符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個物件裡
更加底層,提供的API豐富(request, response)
脫離了XHR,是ES規範裡新的實現方式
1)fetchtch只對網路請求報錯,對400,500都當做成功的請求,需要封裝去處理
2)fetch預設不會帶cookie,需要新增配置項
3)fetch不支援abort,不支援超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺執行,造成了量的浪費
4)fetch沒有辦法原生監測請求的進度,而XHR可以