Fetch API
Fetch API提供了一個(gè)fetch()方法，它被定義在BOM的window對(duì)象中，你可以用它來發(fā)起對(duì)遠(yuǎn)程資源的請(qǐng)求欠窒。 該方法返回的是一個(gè)Promise對(duì)象，讓你能夠?qū)φ?qǐng)求的返回結(jié)果進(jìn)行檢索。
為什么使用Fetch
傳統(tǒng)ajax燕雁，必須使用它的實(shí)例來執(zhí)行請(qǐng)求和接收返回響應(yīng)。
通過FetchAPI可以明確配置請(qǐng)求對(duì)象鲸拥。
fetch(url,{
method:"POST",
body:JSON.stringify(data),
headers: {"Content-Type":"application/json"},
credentials:"same-origin"
}).then(function(response){
? response.status//=> number 100–599
? response.statusText//=> String
? response.headers//=> Headers
? response.url//=>String
? response.text().then(function(responseText){ ... })},function(error){?
? error.message//=> String
})
url
定義要獲取的資源拐格。
一個(gè)USVString字符串，包含要獲取資源的URL
一個(gè)Requeset對(duì)象
options（可選）
一個(gè)配置項(xiàng)對(duì)象刑赶，包括所有對(duì)請(qǐng)求的設(shè)置捏浊。可選參數(shù)有：
method:請(qǐng)求使用的方法撞叨，如GET金踪、POST。
headers:請(qǐng)求的頭信息牵敷，形式為Headers對(duì)象ByteString胡岔。
body:請(qǐng)求的body信息：可能是一個(gè)Blob、BufferSource枷餐、FormData靶瘸、URLSearchParams
mode:請(qǐng)求的模式，如cors毛肋、no-cors或者same-origin怨咪。
credentials：請(qǐng)求的credentials，如omit润匙、same-origin或者include诗眨。
cache:請(qǐng)求的cache模式:default,no-store,reload,no-cache,force-cache, 或者only-if-cached
response
一個(gè)Promise,resolve時(shí)回傳Response對(duì)象：
屬性：
? ? ? status (number) -HTTP請(qǐng)求結(jié)果參數(shù)，在100–599 范圍
? ? ? statusText (String)- 服務(wù)器返回的狀態(tài)報(bào)告
? ? ? ok (boolean)- 如果返回200表示請(qǐng)求成功則為true
? ? ? headers (Headers)- 返回頭部信息趁桃，下面詳細(xì)介紹
? ? ? url (String)- 請(qǐng)求的地址
方法：
? ? ? text()- 以string的形式生成請(qǐng)求text
? ? ? json()- 生成JSON.parse(responseText)的結(jié)果
? ? ? blob()- 生成一個(gè)Blob
? ? ? arrayBuffer()- 生成一個(gè)ArrayBuffer
? ? ? formData()- 生成格式化的數(shù)據(jù)辽话，可用于其他的請(qǐng)求
其他方法：
? ? ? clone()
? ? ? Response.error()
? ? ? Response.redirect()
response.headers
has(name) (boolean)- 判斷是否存在該信息頭
get(name) (String)- 獲取信息頭的數(shù)據(jù)
getAll(name) (Array)- 獲取所有頭部數(shù)據(jù)
set(name, value)- 設(shè)置信息頭的參數(shù)
append(name, value)- 添加header的內(nèi)容
delete(name)- 刪除header的信息
forEach(function(value, name){ ... }, [thisContext])- 循環(huán)讀取header的信息
GET請(qǐng)求
fetch('/users.html')?
.then(function(response){
? ? returnresponse.text()?
}).then(function(body){
? ? document.body.innerHTML = body?
})
POST請(qǐng)求
fetch('/users', {
? ?method:'POST',
? ?headers: {
? ? ? ? 'Accept':'application/json',
? ? ? ? 'ContentType':'application/json'
? ?},
? body: JSON.stringify({
? ? ? ?name:'Yancy',
? ? ? ?login:'Yancy',?
? })
})
采用promise形式
var promise =new Promise(function(resolve, reject){
? if(/* 異步操作成功 */){
? ? resolve(value);?
? }else{
? ? reject(error);?
?}
});
