VUE之await fetch与await axios.get的区别及说明

一、await fetch与await axios.get的区别

在 JavaScript 中，fetch 是原生的 Web API，用于发起 HTTP 请求（如 GET、POST），而 axios 是一个第三方库（基于 Promise 的 HTTP 客户端）。

两者都支持使用 await 语法（在 async 函数中）来处理异步操作，因为 fetch() 和 axios.get() 都返回一个 Promise 对象。

以下是详细的区别：

1.1、核心区别

• fetch: 它是浏览器内置的方法，不需要额外安装库。但使用时需要手动处理响应体和错误（例如，HTTP 错误状态码如 404 不会导致 Promise rejection；网络失败才触发拒绝）。响应的解析需要额外调用 .json() 或 .text() 方法。
• axios.get(): 是 axios 库提供的专门方法（库需安装）。它内置自动 JSON 解析、错误自动化处理（任何非 2xx HTTP 状态码都会拒绝 Promise）、拦截器、请求取消等高级功能。API 更简洁，减少样板代码。

1.2、其他关键差异

错误处理：

• fetch: 仅当网络错误（如 CORS 失败、DNS 失败）时才拒绝 Promise；HTTP 错误（如 404）需手动检查。
• axios: 任何非 2xx HTTP 状态码都会自动拒绝 Promise，简化错误捕获。

JSON 解析：

• fetch: 需要显式调用 .json() 方法来解析 JSON 响应。
• axios: JSON 响应自动解析，数据可直接访问 response.data。

易用性与功能：

• axios 提供额外功能（如拦截器、进度追踪），而 fetch 更轻量但需编写更多代码。

浏览器支持：

• fetch 在较新浏览器原生支持（IE 不支持），而 axios 背后使用 XMLHttpRequest 或 fetch，具有跨浏览器一致性。

二、代码示例

下面用 JavaScript 展示两者在 async/await 中的典型用法，处理一个 GET 请求到 “https://jsonplaceholder.typicode.com/posts/1”（这是一个公共 API）。

2.1、示例 1: 使用fetch实现

// 假设在 async 函数内
try {
  // 发起 GET 请求
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  
  // 检查 HTTP 状态码：如果非 2xx，需手动抛出错误
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`); // 如 404
  }
  
  // 解析 JSON 数据（fetch 要求显式解析）
  const data = await response.json();
  console.log('Fetch result:', data);
} catch (error) {
  // 捕获网络错误或手动抛出的错误
  console.error('Fetch error:', error.message);
}

解释：

• await fetch(...) 发起请求，返回一个 Response 对象。
• response.ok 检查 HTTP 状态是否在 200-299 范围内（例如，404 不会被 await 拒绝）。
• await response.json() 是必需的第二步，将响应体解析为 JSON。
• 错误处理需手动处理非 2xx 状态（通过 if (!response.ok) 抛出），否则这些错误被视为成功响应。

2.2、示例 2: 使用axios.get()实现

// 安装 axios：npm install axios
const axios = require('axios'); // 或 import axios from 'axios';

// 假设在 async 函数内
try {
  // 发起 GET 请求，axios.get() 自动处理 JSON 解析和错误
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
  
  // 数据直接存在于 response.data 中
  console.log('Axios result:', response.data);
} catch (error) {
  // 自动捕获网络错误或非 2xx HTTP 错误
  console.error('Axios error:', error.message); // 包括 404 等错误
}

解释：

• await axios.get(...) 直接返回完整数据（自动解析 JSON 到 response.data）。
• 非 2xx HTTP 状态码视为错误（拒绝 Promise），无需手动检查。
• 错误对象包含更多信息（如 error.response.status），便于调试。
• 配置灵活（如请求头设置可通过 axios.get(url, { headers: ... }) 完成）。

三、总结

• 优先使用 axios: 适合复杂请求、易用性（更少的代码、自动功能）和一致错误处理。
• 使用 fetch: 当不想引入外部库时（如小型项目），但需注意手动错误和解析处理。

两者在 await 机制下都是异步的，核心区别在于易用性、特性和内置逻辑。axios 是更高级的封装，提供了更开发友好的体验。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论