JS--Fetch API

fetch()

使用 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对象。