Skip to main content

Fetch Request 接口

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

一、Request 的构造器​

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

二、Request 的属性​

  • 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）。

  • Body.body（只读）：一个简单 getter 用于曝光一个 ReadableStream 的主体内容。

  • Body.bodyUsed（只读）：存储一个 Boolean 判断主体是否已经被用于一个响应中。

三、Request 的方法​

  • Request.clone()：创建当前 request 的副本。

  • Body.arrayBuffer()：返回解决一个 ArrayBuffer 表示的请求主体的 promise。

  • Body.blob()：返回解决一个 Blob 表示的请求主体的 promise。

  • Body.formData()：返回解决一个 FormData 表示的请求主体的 promise。

  • Body.json()：返回解决一个 JSON 表示的请求主体的 promise。

  • Body.text()：返回解决一个 USVString 表示的请求主体的 promise。

四、Request 的应用​

下面使用 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() 构造函数创建了一个新的 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;

注意：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);
  });