XMLHttpRequest 的问题
所有的功能全部几乎在同一个对象上,容易书写出混乱不易维护的代码
采用传统的事件驱动模式,无法适配的 Promise Api
Fetch Api 的特点
并非取代 AJAX,而是对 AJAX 传统 API 的改进
精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX 场景
使用 Promise Api,更利于异步代码的书写
Fetch Api 并非 ES6 的内容,属于 HTML5 新增的 Web Api
需要掌握网络通信的知识。
参数
该函数有两个参数:
必填:字符串、请求地址
选填:对象、请求配置
请求配置对象
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 的响应。