这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Fetch API 的 Request接口?用来表示资源请求。
 

你可以使用  Request.Request() ?构造函数创建一个Request 对象,但是你可能会遇到一个 Request 对象作为其它 API 的操作被返回,比如一个 service worker的FetchEvent.request

构造器

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

属性

Request.method 只读
包含请求的方法 (GET, POST, 等.)
Request.url 只读
包含这个请求的URL。
Request.headers 只读
包含请求相关的Headers对象。
Request.context 只读  
包含请求的上下文(例如:audio, image, iframe, 等)
Request.referrer 只读
?包含请求的来源 (例如:client)。
Request.referrer 只读
?包含请求来源的策略 (例如: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的副本。

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

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

注意:这些Body功能只能运行一次; 随后的调用将通过空strings/ 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);
  });/pre>

在下面的代码片段中,我们使用Request()构造函数创建了一个新的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);
  });

规范

Specification Status Comment
Fetch
Request
Living Standard Initial definition

浏览器兼容性

 

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support42 Yes39 No28 No
Request() constructor

42

411

15

39

342

No

29

283

10.1
cache No5 Yes48 No No11
context42 — 46 ?39 — 426 No28 — 29 No
credentials

42

417

Yes

39

342

No

29

283

No
destination651461 No52 No
headers

42

417

Yes

39

342

No

29

283

No
integrity46 Yes Yes No Yes No
keepalive6615 ? ?43 ?
method

42

417

Yes

39

342

No

29

283

No
mode42 Yes39 No29 No
redirect46 Yes Yes No Yes No
referrer

42

417

Yes47 No

29

283

No
referrerPolicy52 Yes47 No ? No
url

42

417

Yes

39

342

No

29

283

No
clone

42

417

Yes

39

342

No

29

283

No
signal ?16 ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4242 Yes Yes28 No4.0
Request() constructor

42

411

42

411

Yes Yes No10.3

4.0

5.04

cache No No Yes No No No No
context42 — 4642 — 46 ? No No No4.0
credentials No42 — 46 Yes No No No4.0
destination ?65 ?6152 No ?
headers No42 — 46 Yes No No No4.0
integrity No46 Yes No Yes No5.0
keepalive No66 ? ?43 ? No
method No42 — 46 Yes No No No4.0
mode4949 Yes No No No5.0
redirect No46 Yes Yes Yes No5.0
referrer No No Yes No No No No
referrerPolicy ? ? Yes ? No No ?
url No42 — 46 Yes No No No4.0
clone No No Yes No No No No
signal ? ? ? ? ? ? ?

1. Some default values for the init parameter changed in Chrome 47. See the Properties section for details.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

4. Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.

5. Nightly build

6. see bug 1188062 for more information.

7. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

相关链接

文档标签和贡献者

此页面的贡献者: freeshineit, johnlin0207, qinghaitvxq, mo-n, gafish, looch5
最后编辑者: freeshineit,