React中fetch---基本使用
一、fetch
fetch是一種XMLHttpRequest的一種替代方案，在工作當中除了用ajax獲取后台數據外我們還可以使用fetch、axios來替代ajax
二、fetch的基本使用
fetch(url).then(res => {
return res.json() //res不是需要的請求數據
}).then(data => {
console.log(data) //data是請求數據
}).catch(e =>{
console.log(e) //e是異常信息
})
說明：
1、fetch的返回值是一個promise對象
2、options
method:HTTP請求方式，默認是GET
body:請求的參數
因為JSON內容是必須的，所以當設置主體時會調用JSON.stringify。
fetch(url, {
method: 'delete',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ //在服務器端通過req.body.eid方式獲取
eid: id
})
}).then(res =>{
return res.json(); //不是用戶需要的數據,通過return返回
}).then(data =>{ //用戶需要的數據
console.log(data.msg)
}).catch(e =>{
console.log(e)
})
或
fetch(url, {
method: 'delete',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: "eid="+id
}).then(res =>{
return res.json();
}).then(data =>{
console.log(data.msg)
}).catch(e =>{
console.log(e)
})
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可以