Fetch API

Fetch API是告别XMLHttpRequest的全新选择。不仅使用了promise而且比ajax更加灵活。

概念与用法

Fetch提供了对Request和Response对象的通用定义。使之可以用在更多的应用场景中。

Fetch必须接受一个url参数，第二个可选作为对请求的配置对象。无论请求成功与否，都会返回一个promise，resolve对应Response。

其实fetch接受的两个参数就是Request，只不过也可以在fetch中单独传入参数来代替。

一旦Response被返回，就有一些方法可以使用了。

Fetch API

Fetch API旨在用来简化 HTTP 请求，它包含以下类和方法：

fetch 方法：用于发起 HTTP 请求
Request 类：用来描述请求
Headers 类：用来表示 HTTP 头部信息
Response 类：用来表示响应

fetch

1	fetch(input, init)

fetch方法接受两个参数，第一个input就是必须的url参数（也可以是一个Resquest对象）
第二个init是可选的传入一个配置的对象，可以用它来包括所对请求进行设置。

一个fetch请求的栗子

fetch('/users', {
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

注意，fetch方法是自动会将URI中的双引号进行编码的，如果在URI中存入了部分JSON，有时候会出现意想不到的问题，譬如我们以GET方法访问如下的URI：

1	[GET] http://api.com?requestData={"p":"q"} // [GET] http://api.com?requestData={%22p%22:%22q%22}

Request

首先你可以通过Request构造函数创建一个请求体对象，第一个参数是url，第二个参数可选用于设置请求的方式等。需要注意的是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

Headers

Fetch API的Headers可以对HTTP的请求做一些添加额外的自定义请求头的操作。

Headers的一些基本的方法：

Headers.append() // 向请求头中添加一个值。
Headers.delete() // 从请求头中删除一个值。
Headers.entries() // 返回Headers中所有的键值对。

栗子：

1
2
3

let FetchHeader = new Headers();

FetchHeader.append('Content-Type', 'text/xml');

需要注意的是Fetch与Ajax不同的是Fetch不会像Ajax一样自动发送服务端设置的cookie,如果需要设置fetch自动发送cookie，需要将credentials设置为same-origin

1
2
3

fetch('/test', {
  credentials: 'same-origin'
})

Response

fetch提供的promise的then函数中提供了一个Response对象，即代表对服务端返回值的封装，也可以在前后端分离的时候自己Mock自己的Response对象。

栗子：

var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

response 拿到的对象直接打印出来是不能得到我们想要的结果的，可以再获取的的时候对res进行一次json()的转换就可以拿到想要的结果了。

fetch('http://localhost/')
.then(res => res.json()).then((res) => {
    console.log(res)
  })

概念与用法

Fetch API

fetch

Request

Headers

Cookie

Response