因为 Fetch
API 是基于 Promise
设想,有必要先进修一下 Promise
,引荐浏览 MDN Promise 教程
本文章内容引荐浏览 MDN Fetch 教程
语法申明
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
细致参数案例:
//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()
import 'whatwg-fetch'
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
定义要猎取的资本。这多是:
一个
USVString
字符串,包含要猎取资本的URL
。一个
Request
对象。
options(可选)
一个设置项对象,包含一切对要求的设置。可选的参数有:
method
: 要求运用的要领,如GET
、POST
。headers
: 要求的头信息,情势为Headers
对象或ByteString
。body
: 要求的body
信息:多是一个Blob
、BufferSource
、FormData
、URLSearchParams
或许USVString
对象。注重GET
或HEAD
要领的要求不能包含body
信息。mode
: 要求的形式,如cors
、no-cors
或许same-origin
。credentials
: 要求的credentials
,如omit
、same-origin
或许include
。cache
: 要求的cache
形式:default
,no-store
,reload
,no-cache
,force-cache
, 或许only-if-cached
。
response
一个 Promise
,resolve
时回传 Response
对象:
属性:
status (number)
– HTTP要求效果参数,在100–599 局限statusText (String)
– 服务器返回的状态报告ok (boolean)
– 假如返回200示意要求胜利则为trueheaders (Headers)
– 返回头部信息,下面细致引见url (String)
– 要求的地点
要领:
text()
– 以string
的情势天生要求textjson()
– 天生JSON.parse(responseText)
的效果blob()
– 天生一个Blob
arrayBuffer()
– 天生一个ArrayBuffer
formData()
– 天生格式化的数据,可用于其他的要求
其他要领:
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean)
– 推断是不是存在该信息头get(name) (String)
– 猎取信息头的数据getAll(name) (Array)
– 猎取一切头部数据set(name, value)
– 设置信息头的参数append(name, value)
– 增加header的内容delete(name)
– 删除header的信息forEach(function(value, name){ ... }, [thisContext])
– 轮回读取header的信息
运用案例
GET要求
HTML
fetch('/users.html') .then(function(response) { return response.text() }).then(function(body) { document.body.innerHTML = body })
IMAGE
var myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
JSON
fetch(url) .then(function(response) { return response.json(); }).then(function(data) { console.log(data); }).catch(function(e) { console.log("Oops, error"); });
运用 ES6 的 箭头函数 后:
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
response的数据
fetch('/users.json').then(function(response) {
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
console.log(response.status)
console.log(response.statusText)
})
POST要求
fetch('/users', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
搜检要求状态
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
function parseJSON(response) {
return response.json()
}
fetch('/users')
.then(checkStatus)
.then(parseJSON)
.then(function(data) {
console.log('request succeeded with JSON response', data)
}).catch(function(error) {
console.log('request failed', error)
})
采纳promise情势
Promise 对象是一个返回值的代办,这个返回值在promise对象建立时未必已知。它许可你为异步操纵的胜利或失利指定处置惩罚要领。 这使得异步要领能够像同步要领那样返回值:异步要领会返回一个包含了原返回值的 promise 对象来替换原返回值。
Promise组织函数接收一个函数作为参数,该函数的两个参数离别是resolve
要领和reject
要领。假如异步操纵胜利,则用resolve
要领将Promise
对象的状态变成“胜利”(即从pending变成resolved);假如异步操纵失利,则用reject要领将状态变成“失利”(即从pending变成rejected)。
promise实例天生今后,能够用then要领离别指定resolve要领和reject要领的回调函数。
//建立一个promise对象
var promise = new Promise(function(resolve, reject) {
if (/* 异步操纵胜利 */){
resolve(value);
} else {
reject(error);
}
});
//then要领能够接收两个回调函数作为参数。
//第一个回调函数是Promise对象的状态变成Resolved时挪用,第二个回调函数是Promise对象的状态变成Reject时挪用。
//个中,第二个函数是可选的,不一定要供应。这两个函数都接收Promise对象传出的值作为参数。
promise.then(function(value) {
// success
}, function(value) {
// failure
});
那末连系promise后fetch的用法:
//Fetch.js
export function Fetch(url, options) {
options.body = JSON.stringify(options.body)
const defer = new Promise((resolve, reject) => {
fetch(url, options)
.then(response => {
return response.json()
})
.then(data => {
if (data.code === 0) {
resolve(data) //返回胜利数据
} else {
if (data.code === 401) {
//失利后的一种状态
} else {
//失利的另一种状态
}
reject(data) //返回失利数据
}
})
.catch(error => {
//捕捉非常
console.log(error.msg)
reject()
})
})
return defer
}
挪用Fech要领:
import { Fetch } from './Fetch'
Fetch(getAPI('search'), {
method: 'POST',
options
})
.then(data => {
console.log(data)
})
支撑状态及解决方案
原生支撑率并不高,荣幸的是,引入下面这些 polyfill
后能够圆满支撑 IE8+ :
因为 IE8 是 ES3,须要引入 ES5 的
polyfill
:es5-shim
,es5-sham
引入
Promise
的polyfill
:es6-promise
引入
fetch
探测库:fetch-detector
引入
fetch
的polyfill
:fetch-ie8
可选:假如你还运用了
jsonp
,引入fetch-jsonp
可选:开启
Babel
的runtime
形式,如今就运用async
/await
翻译自 Fetch