React中fetch 基本使用

react中fetch---基本使用

一、fetch

fetch是一種xmlhttprequest的一種替代方案，在工作當中除了用ajax獲取後台資料外我們還可以使用fetch、axios來替代ajax

二、fetch的基本使用

fetch(url).then(res => ).then(data => ).catch(e =>,

body:json.stringify()

}).then(res =>).then(data =>).catch(e =>)

或

headers:http請求頭

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",).then(response => ).then((data)=>)

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可以