Fetch

摘要：本文学习了现代浏览器提供的Fetch接口，包括基本用法、请求配置、响应处理和错误处理。

1 简介

Fetch是ES6提出的一个发起网络请求的接口，它允许通过JS异步地请求资源，用于替代传统的XMLHttpRequest对象。

由于Fetch使用了ES6的Promise对象，所以解决了令人诟病的回调地域问题，使得异步操作更加简洁和易于理解。

使用Fetch接收到的结果是Stream对象，需要异步读取响应数据。

2 语法

2.1 基础用法

最基本的语法：

fetch(url, options)
  .then(response => {
    // 处理响应，解析JSON数据
    return response.json();
  })
  .then(data => {
    // 使用解析后的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败：', error);
  });

参数：

url：要发送请求的目标URL。
options：可以指定请求方法、请求头、请求体等内容，可选。

2.2 异步等待

使用ES7提供的语法糖可以让代码更清晰：

async function fetchData() {
  try {
    const response = await fetch(url, options);
    return await response.json();
  } catch (error) {
    console.error('请求失败：', error);
  }
}

3 配置请求

3.1 设置请求方法

支持RESTful风格的各种HTTP方法：

// GET请求
fetch('/api/users');
fetch('/api/user/1');

// POST请求
fetch('/api/user', {
  method: 'POST',
  body: JSON.stringify({ name: '张三' })
});

// PUT请求
fetch('/api/user/1', {
  method: 'PUT',
  body: JSON.stringify({ name: '李四' })
});

// DELETE请求
fetch('/api/user/1', {
  method: 'DELETE'
});

3.2 设置请求头

可以自定义请求头：

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '张三' })
});

3.3 设置请求体

提交JSON数据，需要修改请求头：

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '张三' })
});

提交Form表单数据，使用默认请求头：

const form = document.querySelector('form');
const formData = new FormData(form);
fetch('/api/user', {
  method: 'POST',
  body: formData
});

上传Form表单文件：

const avatar = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('name', '张三');
formData.append('avatar', avatar.files[0]);
fetch('/api/user/1', {
  method: 'PUT',
  body: formData
});

4 处理响应

4.1 同步属性

虽然读取响应数据是异步的，但是也有可以同步获取的同步属性：

fetch(url, options)
  .then(response => {
    // 返回数字表示HTTP响应的状态码，比如返回200表示成功
    console.log(response.status);
    // 返回字符串表示HTTP响应的状态文本，比如返回OK表示成功
    console.log(response.statusText);
    // 返回布尔值表示请求是否成功，true对应状态码在200-299之间，false对应状态码其他值
    console.log(response.ok);
    // 返回字符串表示请求的URL
    console.log(response.url);
    // 返回枚举值表示请求的类型
    console.log(response.type);
    // 返回布尔值表示请求是否重定向
    console.log(response.redirected);
    // 解析响应的JSON数据
    return response.json();
  });

常见的请求类型：

basic：普通请求，即同源请求。
cors：跨域请求。
error：网络错误，主要用于前端和后端交互的请求。

4.2 检查状态

只有网络错误，或者无法连接时，请求才会报错（Promise变为rejected状态），其他情况都不会报错（Promise变为Fulfilled状态），认为请求成功。

所以需要通过response.status判断请求是否成功：

fetch(url, options)
  .then(response => {
    if (response.status >= 200 && response.status < 300) {
      return response.json();
    } else {
      throw new Error(response.status);
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('请求失败：', error));

也可以通过response.ok判断请求是否成功：

fetch(url, options)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(response.status);
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('请求失败：', error));

4.3 读取响应头

通过response.headers获取响应头：

fetch(url, options)
  .then(response => {
    response.headers.forEach((value, key) => console.log(key, ':', value));
  })
  .then(data => console.log(data))
  .catch(error => console.error('请求失败：', error));

4.4 读取响应体

根据服务器返回的不同类型的数据，提供了不同的读取方法：

response.text()：得到字符串。
response.json()：得到JSON对象。
response.blob()：得到二进制Blob对象。
response.formData()：得到FormData表单对象。
response.arrayBuffer()：得到二进制ArrayBuffer对象。

上面的方法都是异步的，返回的都是Promise对象，必须等到异步操作结束才能得到服务器返回的完整数据。

响应返回的Stream对象只能读取一次，再次读取就会报错，可以使用response.clone()方法创建备份：

fetch(url, options)
  .then(response => {
    console.log(response.clone().text());
    return response.json();
  });