前言：
這里需要說明一下，fetch執(zhí)行之后會(huì)回調(diào)一個(gè)promise對象，所以如果沒了解過promise用法的可以去了解一下
至于為什么要用fetch？試想一下一個(gè)場景，用傳統(tǒng)xhr按順序訪問兩個(gè)異步接口，如果第一個(gè)接口訪問失敗了，那第二個(gè)接口就不能在繼續(xù)進(jìn)行了，但用fetch就能處理這種情況了。
進(jìn)入開發(fā)
首先第一步，按照官方文檔的說法，我們需要先創(chuàng)建一個(gè)request對象作為fetch執(zhí)行參數(shù)
const myRequest = new Request(url, init);
或者
const myRequest = new Request(requestJson);
其中url為請求地址，init為設(shè)置的相關(guān)屬性，requestJson是request對象，兩者參數(shù)相似
method - 使用的HTTP動(dòng)詞，GET, POST, PUT, DELETE, HEAD
url - 請求地址，URL of the request
headers - 關(guān)聯(lián)的Header對象
referrer - referrer
mode - 請求的模式，主要用于跨域設(shè)置，cors, no-cors, same-origin
credentials - 是否發(fā)送Cookie omit, same-origin
redirect - 收到重定向請求之后的操作，follow, error, manual
integrity - 完整性校驗(yàn)
cache - 緩存模式(default, reload, no-cache)
這里注意一下，requestJson和init中有一個(gè)mode參數(shù)，可以設(shè)置請求模式，對于跨域請求（no-cors：僅用于請求文件的時(shí)候使用；cors：跨域需要前后端設(shè)置頭部信息）等問題是一個(gè)比較簡易的解決方式
關(guān)于response
在用到ServiceWorkers的時(shí)候我們可能需要新建一個(gè)response對象，但一般不需要?jiǎng)?chuàng)建
var response = new Response('...',{
ok:false,
status:404,
url:'/'
})
下面，我們來創(chuàng)建一個(gè)基本的fetch
const req=new Request('http://hd2.nfapp.southcn.com/wx/getShareSignInfo',{method:'get',cache:false,mode:"no-cors"});
fetch(req).then((response)=>{
console.log(response);
if(response.ok)return response.json();
}
).then((result)=>{
console.log(result);
}).catch((e)=>{
console.log(e);
});
這里我們能看到我們接收到的并不是后臺接口回傳的參數(shù)，而是一個(gè)包含有狀態(tài)、請求類型和回傳參數(shù)等的一個(gè)json；
上面是一個(gè)基本的請求，下面我們來看看如果需要發(fā)送參數(shù)post和get方法的區(qū)別
對于get方法
我們知道用get方法傳參的話需要封在url頭部，因?yàn)間et方法并沒有body作為載體去傳輸數(shù)據(jù)的，而對于fetch的使用如下：
首先創(chuàng)建一個(gè)供我們發(fā)送的參數(shù)
let sendData=new URLSearchParams();//創(chuàng)建url格式參數(shù)
在參數(shù)中插入key，val
sendData.append("name",123);
然后我們需要在我們的請求參數(shù)的url加上參數(shù)
const req=new Request('url?'+sendData,{method:'get',cache:false,mode:"no-cors"});
對于post方法
post和get傳參是不一樣的，用post方式傳參的話需要把參數(shù)加在body上，創(chuàng)建發(fā)送參數(shù)的方法也有所不同，但大同小異，直接上代碼：
let sendData=new formData();//創(chuàng)建數(shù)據(jù)格式參數(shù)
sendData.append("name",123);
const req=new Request('url',{method:'get',cache:false,mode:"no-cors",body:sendData});
至此，fetch的基本請求已經(jīng)完成
