Fetch API

XMLHttpRequest的问题

所有的功能全部集中在同一个对象上，容易写出不易维护的代码
采用传统的事件驱动模式，无法适配新的Promise API

Fetch API的特点

并非取代AJAX，而是对AJAX的一种改进
精细的功能分割：头部信息，请求信息，响应信息等均分布到不同的对象，更利于处理各种复杂的AJAX场景
使用了Promise API，更利于异步代码的书写
Fetch API不是ES6的内容，而是HTML5新增的web API
需要有网络通信的知识

基本使用

请求测试地址：http://api.kuanglinfeng.com

使用fetch函数即可向服务器发送网络请求

  async function getList() {
    const url = 'http://api.kuanglinfeng.com'
    const config = {
      method: 'GET',
      headers: {
        "Content-Type": "application/json",
        // mode: 'no-cors'
      }
    }
    const data = await fetch(url, config).then(response => {
      return response.json()
    })
    console.log(data)
  }

  const button = document.querySelector('button')

  button.addEventListener('click', async () => {
    await getList()
  })

参数

该函数有两个参数：

必填，字符串，请求地址
选填，对象，请求配置

参数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缓存
- no-cache：如果存在缓存，那么fetch将发送一个条件查询request和一个正常的request，拿到响应后会更新http缓存
- reload：表示fetch请求之前将忽略http缓存的存在，但是请求拿到响应后，它将主动更新http缓存
- force-cache：表示fetch请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓存读取，除非没有任何缓存，那么它将发送一个正常的request
- only-if-cached：表示fetch请求不顾一切的依赖缓存，即使缓存过期了，依旧从缓存中读取，如果没有缓存，将抛出网络错误（该设置只在mode为same-origin有效）

返回值

fetch函数返回一个Promise对象

当收到服务器的返回结果后，Promise进入resolve状态，状态数据为Response对象
当网络发生错误（或其它导致无法完成交互的错误）时，Promise进入reject状态，状态数据为错误信息

Response对象

ok：boolean，当响应码在200-299之间为true，其它为false
status：number，响应的状态码
text()：用于处理文本格式的Ajax响应，它从响应中获取文本流，将其读完，然后返回一个被resolve为string对象的Promise
blob()：用于处理二进制文件格式（图片、电子表格等）的Ajax响应，它读取文件的原始数据，一旦读取完整个文件，就返回一个被resolve为blob对象的Promise
json()：用于处理JSON格式的Ajax响应，它将JSON数据流转换为一个被resolve为JavaScript对象的Promise
redirect()：可以用于重定向到另一个URL，它会创建一个新的Promise，resolve来自重定向的URL的响应

Request对象

除了Fetch API上面的基本用法外（实际fetch内部会帮你创建Request对象），还可以通过创建一个Request对象来完成请求

  async function getList() {
    const url = 'http://api.kuanglinfeng.com'
    const config = {
      method: 'GET',
      headers: {
        "Content-Type": "application/json",
        // mode: 'no-cors'
      }
    }
    // 创建Request对象
    const request = new Request(url, config)
    const data = await fetch(request).then(response => {
      return response.json()
    })
    console.log(data)
  }

  const button = document.querySelector('button')

  button.addEventListener('click', async () => {
    await getList()
  })

注意：尽量保证每次请求都是一个新的Request对象

Headers对象

在Request和Response对象内部，会将传递的请求头对象，转换为Headers

Headers对象中的方法：

has(key)：检查请求头中是否存在指定的key值
get(key)：得到请求头中对应的值
set(key, value)：修改对应的键值对
append(key, value)：添加键值对
keys()：得到所有的请求头键的数组
values()：得到所有的请求头值的数组
entries()：得到所有请求头中的键值对的数组