Fetch使用

Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用

过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和

灵活的功能集。

概念和用法

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使

之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他

处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。

注意事项：

1. fetch() 必须接受一个参数——资源的路径

2. 无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。你也

   可以传一个可选的第二个参数init。

3. 一旦 Response 被返回，就有一些方法可以使用了，比如定义内容或者处理方法（参见 Body）

参数

Promise<Response> fetch(input[, init]);

Input：

1. String类型，URL请求

2. Object类型，new Qeuest()

Init:

1. method: get、post...

2. headers: 要添加到请求的任何标头，包含在Headers对象或具有ByteString值的对象文字中。 请注意，某些名称是被禁止的。

3. body: 要添加到请求中的正文,请注意，使用GET或HEAD方法的请求不能包含正文。

4. mode: 您希望用于请求的模式，例如，cors，no-cors或同源。

举例子

const myImage = document.querySelector('img');

let myRequest = new Request('flowers.jpg');

fetch(myRequest)

.then(function(response) {

  if (!response.ok) {

    throw new Error('HTTP error, status = ' + response.status);

  }

  return response.blob();

})

.then(function(response) {

  let objectURL = URL.createObjectURL(response);

  myImage.src = objectURL;

});

const myImage = document.querySelector('img');

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'image/jpeg');

const myInit = { method: 'GET',

               headers: myHeaders,

               mode: 'cors',

               cache: 'default' };

let myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {

  ...

});