JS--Fetch API
2019-04-29 本文已影响0人
小懒豆
fetch()
Headers()
var myHeaders = new Headers(init);
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.get('Content-Type'); // Returns 'image/jpeg'
var secondHeadersObj = new Headers(myHeaders);
secondHeadersObj.get('Content-Type'); // Would return 'image/jpeg' — it inherits it from the first headers object
//------------------------------------------------------------
myHeaders.append('Content-Type', 'text/xml');
myHeaders.append('Vary', 'Accept-Language');
// Display the key/value pairs
for (var pair of myHeaders.entries()) {
console.log(pair[0]+ ': '+ pair[1]);
}
//content-type: text/xml
//vary: Accept-Language
- 方法:
append()
delete()
entries()
get()
getAll()
has()
keys()
set()
values()
Request()
const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true
fetch(myRequest)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
- 属性
Request.method
: 包含请求的方法 (GET, POST, 等.)
Request.url
: 包含这个请求的URL。
Request.headers
: 包含请求相关的Headers对象。
Request.context
: 包含请求的上下文(例如:audio, image, iframe, 等)
Request.referrer
: 包含请求的来源 (例如:client)。
Request.referrerPolicy
: 包含请求来源的策略 (例如:no-referrer)。
Request.mode
: 包含请求的模式 (例如: cors, no-cors, same-origin, navigate).
Request.credentials
: 包含请求的证书(例如: omit, same-origin).
Request.redirect
: 包含如何处理重定向模式,它可能是一个 follow ,error或者manual。
Request.integrity
: 包含请求的子资源的完整性值 (例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.cache
: 包含请求的缓存模式 (例如: default, reload, no-cache).
Request实现了Body, 所以它还具有以下属性可用:
Body.body
: 一个简单getter用于曝光一个ReadableStream的主体内容.
Body.bodyUsed
: 存储一个Boolean判断主体是否已经被用于一个响应中. - 方法
Request.clone()
:创建当前request的副本。
Body.arrayBuffer()
:返回解决一个ArrayBuffer表示的请求主体的promise.
Body.blob()
:返回解决一个Blob表示的请求主体的promise.
Body.formData()
:返回解决一个FormData表示的请求主体的promise.
Body.json()
:返回解决一个JSON表示的请求主体的promise.
Body.text()
:返回解决一个USVString(文本)表示的请求主体的promise.
Response()
var myResponse = new Response();
- 属性
Response.headers
: 包含此Response所关联的Headers 对象.
Response.ok
: 包含了一个布尔值来标示该 Response 成功(状态码的范围在200-299)
Response.redirected
: 表示该Response是否来自一个重定向,如果是的话,它的URL列表将会有多个entry
Response.status
: 包含Response的状态码 (例如 200 表示成功)
Response.statusText
: 包含了与该Response状态码一致的状态信息 (例如, OK对应 200).
Response.type
: 包含Response的类型 (例如, basic, cors).
Response.url
: 包含Response的URL.
Response.useFinalURL
:包含了一个布尔值来标示这是否是该Response的最终URL.
Response 实现了 Body接口, 故以下属性亦可用:
Body.body
: 一个简单的getter用于暴露一个ReadableStream类型的body内容。
Body.bodyUsed
: 包含了一个布尔值来标示该Response是否读取过Body. - 方法
Response.clone()
:创建一个Response对象的克隆。
Response.error()
:返回一个绑定了网络错误的新的Response对象。
Response.redirect()
:用另一个URL创建一个新的 response。
Response 实现了 Body接口, 所以以下方法同样可用(因为Responses对象被设置为了 stream 的方式,所以它们只能被读取一次):
Body.arrayBuffer()
:读取 Response对象并且将它设置为已读 ,并返回一个被解析为ArrayBuffer格式的promise对象。
Body.blob()
:读取 Response对象并且将它设置为已读 ,并返回一个被解析为Blob格式的promise对象。
Body.formData()
:读取Response对象并且将它设置为已读 ,并返回一个被解析为FormData格式的promise对象。
Body.json()
:读取 Response对象并且将它设置为已读 ,并返回一个被解析为JSON格式的promise对象。
Body.text()
:读取 Response对象并且将它设置为已读 ,并返回一个被解析为USVString格式的promise对象。