HTML5 API fetch详解(如有细节纰漏, 欢迎指正)

Fetch API

回顾一下XMLHttpRequest的问题

1. 所有的功能全部集中在一个对象上, 容易书写出混乱而且不容易维护的代码
2. 采用传统的事件驱动模式, 无法适配新的 Promise api

Fetch Api的特点

1. 并非取代ajax, 而是对ajax传统api的改进
2. 精细的功能分割: 头部信息, 请求信息, 响应信息等均分布到不同的对象, 更利于处理各种复杂的ajax场景
3. 使用Promise api, 更利于异步代码的书写
4. fetch属于web api, 理所当然只能在浏览器端运行

Fetch Api的基本使用

参数

该函数有两个参数:

1. 必填: 字符串, 对应的是请求地址

//请求数据的函数如下
const getDefaultData = () => {
   
    //在论坛中我找到了一个请求网易云音乐别人已经写好的接口,可以用来测试
    const url = 'https://api.imjad.cn/cloudmusic/?type=song&id=32785674'; 
    fetch(url); 
}

// 假设我们的html页面中有一个按钮, 点击这个按钮就会开始请求数据,然后我们现在获取到这个按钮
const btn = document.querySelector('button');
btn.onclick = () => {
   
    getDefaultData();
}

当上面的代码写好, 我们进行点击操作时, 服务器相应的给我们返回了数据

请求配置对象(红色为比较常用的, 绿色为目前不太常用的)

• method: 字符串, 请求方法, 默认值GET
• headers: 对象, 请求头信息
• body: 请求体的内容, 必须匹配请求头中Content-Type
• mode:字符串, 请求模式
  • cors: 默认值, 配置为该值, 会在请求头中加入origin和referer
  • no-cors: 配置为该值, 将不会再请求头中加入origin和referer, 跨域的时候可能会出现问题
  • same-origin: 配置为该值, 则指示请求必须在同一个域中发生, 如果请求其他域, 则会报错
• credentials: 如何携带凭据
  • 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请求不顾一切的依赖缓存, 即使缓存过期了, 他依然从缓存中读取, 如果没有任何缓存, 那么他将抛出一个错误

//配置对象书写
const getData = function() {
   
    const url = 'xxx/api';
    const config = {
   
        method: 'POST',  // 写请求方法
        headers: {
   
            // 配置请求头
            //例如: "Content-Type": 'application/json'
        },
        body: {
   
            // 配置请求体, 比如POST请求要传递的数据
        }
        //...其他不常用配置
    }
    fetch(url, config);