ES6 Fetch API的基础使用

XMLHttpRequest 的问题

1. 所有的功能全部几乎在同一个对象上，容易书写出混乱不易维护的代码

2. 采用传统的事件驱动模式，无法适配的 Promise Api

Fetch Api 的特点

1. 并非取代 AJAX,而是对 AJAX 传统 API 的改进

2. 精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景

3. 使用 Promise Api，更利于异步代码的书写

4. Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api

5. 需要掌握网络通信的知识。

参数

该函数有两个参数:

1. 必填:字符串、请求地址

2. 选填:对象、请求配置

请求配置对象

• method:字符串、请求方法、默认值 GET

• headers:对象、请求头信息

• body:请求体的内容，必须匹配请求头中的 Content-Type

• mode:字符串，请求模式

  • cors:默认值，配置为该值，会在请求头中加入 origin 和 referer

  • no-cors:配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题

  • same-origin:指示请求必须在同一个域中发生，如果请求其他域，则会报错

• credentials:如何携带凭据(cookie)

  • omit:默认值，不携带 cookie

  • same-origin:请求同源地址时携带 cookie

  • include:请求任何地址都携带 cookie

• cache:配置缓存模式

  • default:表示 fetch 请求之前将检查下 http 的缓存。

  • no-store:表示 fetch 请求将完全忽略 http 缓存的存在。这意味着请求之前将不再检查下 http 的缓存，拿到响应后，它也不会更新 http 缓存。

  • reload:表示 fetch 请求之前将忽略 http 缓存的存在，但是请求拿到响应后，它将主动更新 http 缓存。

  • force-cache:表示 fetch 请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓存中读取。除非没有任何缓存，那么它将发送一个正常的 request。

  • only-if-cached:表示 fetch 请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓冲中读取。如果没有缓存，它将抛出网络错误(该设置只在 mode 为"same-origin"时有效)

返回值

fetch 函数返回一个 Promise 对象

• 当收到服务器的返回结果后，Promise 进入 resolved 状态，状态数据为 Response 对象

• 当网络发生错误(或其他导致无法完成交互的错误)时，Promise 进入 rejected 状态，状态数据为错误信息。

Response 对象

• ok:boolean,当响应消息吗在 200~299 之间时为 true，其他为 false

• statu:number,响应的状态码

• text():用于处理二进制文件格式(比如图片或者电子表格)的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。

• json():用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 promise。

• redirect():可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。