Fetch与Axios的使用

在前端开发中，获取远程数据是非常常见的需求。Fetch API 和 Axios 是两种常用的用于发起 HTTP 请求的工具，它们各有特点，开发者可以根据项目需求选择合适的工具。

本章将介绍 Fetch API 和 Axios 的基本用法，并对比它们的优缺点。

1. Fetch API简介

Fetch API 是浏览器原生提供的一种接口，用于发起 HTTP 请求并处理响应。它返回一个 Promise，可以使用 .then() 和 .catch() 处理成功和失败的情况。Fetch API 基于现代 JavaScript 的异步编程方式，因此使用起来较为简洁。

1.1 使用 Fetch 发送 GET 请求

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();  // 解析JSON数据
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

1.2 使用 Fetch 发送 POST 请求

const data = {
  name: 'John',
  age: 30
};

fetch('https://api.example.com/user', {
  method: 'POST', // 指定请求方法
  headers: {
    'Content-Type': 'application/json' // 设置请求头
  },
  body: JSON.stringify(data) // 将请求数据转化为 JSON 字符串
})
  .then(response => response.json()) // 解析JSON响应数据
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

1.3 Fetch API的优缺点

优点：

  • 原生支持：无需安装额外的库，直接可用。
  • 基于 Promise：支持链式调用和异步/等待模式，代码简洁。
  • 灵活性：支持所有 HTTP 请求方法，包括 GET、POST、PUT、DELETE 等。

缺点：

  • 不支持请求/响应拦截器：不像 Axios，Fetch 本身不支持在请求前后处理数据。
  • 处理错误有限：Fetch 仅在网络请求失败（如网络连接中断）时抛出错误，对于 404 或 500 等 HTTP 错误，需要手动检查响应状态。
  • 不支持取消请求：Fetch 没有内建的请求取消机制。

2. Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js。它是第三方库，功能比 Fetch 更强大，尤其在处理请求和响应时，提供了更多的配置选项和拦截器。

2.1 使用 Axios 发送 GET 请求

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

2.2 使用 Axios 发送 POST 请求

import axios from 'axios';

const data = {
  name: 'John',
  age: 30
};

axios.post('https://api.example.com/user', data)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

2.3 Axios的优缺点

优点：

请求拦截器：可以在请求发送前进行一些操作，如添加认证信息。

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token';
  return config;
});

响应拦截器：可以在响应返回前处理响应数据，或对错误进行统一处理。

axios.interceptors.response.use(response => {
  // 处理响应数据
  return response;
}, error => {
  // 处理错误
  return Promise.reject(error);
});

取消请求：支持取消请求功能，使用 CancelToken 来取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

  • 自动转换响应数据：Axios 会自动将 JSON 格式的响应数据转换为 JavaScript 对象。

  • 支持请求超时：可以设置请求超时选项，方便控制请求的最大等待时间。

缺点：

  • 需要安装：需要通过 npm 或 yarn 安装，不是原生支持。
  • 体积较大：相对于 Fetch，Axios 的体积更大，可能影响项目的加载时间。

3. Fetch与Axios对比

特性Fetch APIAxios
安装无需安装，原生支持需要安装依赖 npm install axios
请求方法支持 GET、POST、PUT、DELETE 等支持 GET、POST、PUT、DELETE 等
返回类型返回 Promise，需手动处理响应返回 Promise，自动解析响应数据
请求拦截器无支持请求拦截器
响应拦截器无支持请求拦截器
请求取消不支持（需通过自定义实现）支持请求取消（通过 CancelToken）
错误处理仅处理网络错误，需要手动检查 HTTP 错误自动处理 HTTP 错误，并可以自定义处理
支持浏览器支持现代浏览器（IE不支持）支持大部分现代浏览器（包括 IE 11）
体积较小，原生实现较大，需要安装第三方库

4. 总结

  • Fetch API 适合简单的 HTTP 请求场景，尤其是在需要轻量、原生实现时。它使用 Promise 并且支持异步/等待模式，具有较低的学习曲线，但功能较为基础。

  • Axios 提供了更多高级功能，如请求和响应拦截器、请求取消和自动转换响应数据等，适用于复杂的 HTTP 请求场景。虽然需要额外安装，但其强大的功能使得在大型应用中十分流行。

根据需求选择工具：

  • 如果需要较为简单的 API 且不需要太多功能，Fetch 足够应对。
  • 如果需要请求拦截、响应拦截、取消请求等高级功能，Axios 更适合。
Last Updated::