Body执行者:Request

2018-01-29 11:32 更新

Request

Fetch API的Request接口代表一个资源请求。

您可以使用Request.Request()构造函数创建一个新的Request对象,但是您更可能遇到由于另一个API操作(如service worker,FetchEvent.request)而返回的Request对象。

Request构造函数

Request.Request()
创建一个新的Request对象。

Request属性

Request.method 只读
包含请求的方法(GETPOST等)
Request.url 只读
包含请求的URL。
Request.headers 只读
包含请求的 Headers 关联对象。
Request.context 只读 
包含请求的上下文(例如,audioimageiframe,等等)
Request.referrer 只读
包含请求的引用者(例如,client)。
Request.referrerPolicy 只读
包含请求的引用者策略(例如,no-referrer)。
Request.mode 只读
包含请求的模式(例如,corsno-corssame-originnavigate。)
Request.credentials 只读
包含请求的凭证(例如omitsame-origin)。
Request.redirect 只读
包含如何处理重定向的模式。这可能是一个followerrormanual
Request.integrity 只读
包含请求的子资源完整性值(例如,sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
Request.cache 只读
包含请求的高速缓存模式(例如,defaultreloadno-cache)。

Request实现Body,所以它也有以下属性可用:

Body.body 只读
一个简单的getter用来暴露ReadableStream正文内容。
Body.bodyUsed 只读
存储一个Boolean声明是否已经在响应中使用了该机构。

Request 方法

Request.clone()
创建当前Request对象的副本。

Request实现Body,所以它也有以下方法可用:

Body.arrayBuffer()
返回一个promise,使用请求主体的ArrayBuffer表现解决。
Body.blob()
返回一个promise,使用请求主体的Blob表现解决。
Body.formData()
返回一个promise,使用请求主体的FormData表现解决。
Body.json()
返回一个promise,使用请求主体的JSON表现解决。
Body.text()
返回一个promise,使用请求主体的USVString(文本)表现解决。

注意:这些Body功能只能运行一次;随后的调用将用空字符串/ ArrayBuffers解决。

Request使用例子

在下面的代码片段中,我们使用Request()构造函数创建一个新的请求(对于与脚本相同的目录中的图像文件),然后返回请求的一些属性值:

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

然后,您可以通过将Request对象作为参数传递给GlobalFetch.fetch()调用来获取此请求,例如:

fetch(myRequest)
  .then(response => response.blob())
  .then(blob => {
    myImage.src = URL.createObjectURL(blob);
  });

在下面的代码片段中,我们使用Request()带有一些初始数据和正文内容的构造函数创建了一个新请求,用于需要主体负载的api请求:

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

注意:body类型只能是一个Blob,BufferSource,FormData,URLSearchParams,USVString或 ReadableStream类型,因此增加一个JSON对象的有效载荷则需要字符串化该对象。

然后,您可以通过将Request对象作为参数传递给GlobalFetch.fetch()调用来获取此api请求,例如获取响应:

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);
  });

规范

规范状态注释
Fetch
该规范中“请求”的定义。
Living Standard
Initial definition

浏览器兼容性

  • 电脑端
Feature
Chrome
Edge
Firefox(Gecko)
Internet Explorer
Opera
Safari(WebKit)
基本的支持支持:42(是)支持:39、34不支持支持:28不支持
Request.body.formData支持:60不支持支持:47不支持
Request.integrity支持:46(是)(是)不支持支持:33不支持
Request.redirect支持:46(是)(是)不支持支持:33不支持
构造函数init可以接受:ReadableStream body支持:43(是)不支持[1]不支持支持:33不支持
  • 移动端
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本的支持支持:42支持:42(是)(是)不支持
支持:28不支持
Request.body.formData支持:60支持:60??不支持
支持:47不支持
Request.integrity支持:46支持:46?(是)不支持
支持:33不支持
Request.redirect支持:46支持:46?(是)不支持
支持:33不支持
构造函数 init可以接受:ReadableStreambody支持:43支持:43(是)不支持[1]不支持
支持:33不支持

注解:

[1]可读流目前在Firefox中启用,但隐藏在dom.streams.enabled和javascript.options.streamsprefs 后面。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号