fetch

简介

fetch 是一个现代化的、基于 Promise 的网络请求 API，用于浏览器和 Node.js 环境中（Node.js 需要 node-fetch 或 undici 等库来实现）。它提供了一种更加简洁和灵活的方式来发起网络请求（如 GET 和 POST 请求）并处理响应。相比传统的 XMLHttpRequest 对象，fetch API 提供了更强大、更灵活的功能集，同时语法也更为简洁。

使用方式

fetch('https://api.example.com/data', {method,headers,body})
  .then(response => {
    if (!response.ok) {
        // 网络响应不被视为 ok，例如状态码不是 2xx
        throw new Error('Network response was not ok');
    }
    return response.json(); // response.text()
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });

优势

1. 浏览器原生支持

   1. Google Chrome: 从Chrome 42开始支持。
   2. Mozilla Firefox: 从Firefox 39开始支持。
   3. Apple Safari: 从Safari 10.1开始支持。
   4. Microsoft Edge: 从Edge 14开始支持。
   5. Opera: 从Opera 29开始支持。

2. 强大的response API

// 下载文件
fetch('https://api.example.com/data', {method,headers,body})
  .then(response => {
    if (!response.ok) {
        // 网络响应不被视为 ok，例如状态码不是 2xx
        throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });
  // 流式传输
fetch('https://api.example.com/data').then(response => {
    // 获取 ReadableStream
    const reader = response.body.getReader();

    // 使用递归函数处理数据流
    function read() {
        // 读取一个数据块
        reader.read().then(({ done, value }) => {
            if (done) {
                console.log('数据处理完毕');
                return;
            }

            // 处理数据块（value）
            console.log('接收到数据块', value);

            // 递归调用，读取下一个数据块
            read();
        }).catch(error => {
            console.error('读取数据流时发生错误', error);
        });
    }

    // 开始读取数据
    read();
}).catch(error => {
    console.error('请求失败', error);
});

缺点

1. 不会自动处理HTTP错误状态码，需要手动处理