Axios vs Fetch：哪种网络请求工具在 Vue 项目中更胜一筹？

在 Vue.js 项目中进行网络请求是开发过程中不可避免的一部分，而常用的两种工具就是 axios 和原生的 fetch。这两者各有优劣，开发者在选择时需要根据具体需求进行权衡。本文将详细对比 axios 和 fetch，并展示如何在 Vue 项目中封装和使用它们。

1. 背景介绍

Axios

axios 是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 中使用。它的 API 简洁易用，支持各种 HTTP 请求方法，并提供了许多实用功能，如自动转换 JSON 数据、拦截器、取消请求等。这些特性使 axios 成为 Vue 开发者的首选网络请求工具。

Fetch

fetch 是浏览器内置的原生 API，用于发起网络请求。它同样基于 Promise，但提供的功能更加基础。fetch 主要用于现代浏览器中替代旧的 XMLHttpRequest，虽然它功能较为简单，但足够满足大多数网络请求需求。

2. API 简洁性与功能对比

Axios 的特点

• 自动转换 JSON ：axios 默认会将响应体视为 JSON 格式，并自动解析为 JavaScript 对象。
• 请求和响应拦截器：允许在请求或响应被处理前拦截并进行处理，这对于全局错误处理、加载状态管理等非常有用。
• 取消请求 ：axios 提供了取消请求的功能，可以在需要时取消特定的 HTTP 请求。
• 自动处理请求头 ：axios 可以自动设置请求头，例如 Content-Type，使开发者无需手动设置。
• 广泛的浏览器兼容性 ：即使在一些旧浏览器中，axios 也能正常工作。

// Axios 示例
import axios from 'axios';

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch 的特点

• 原生支持：无需安装任何第三方库，浏览器原生支持，减少了项目的依赖包大小。
• 轻量级 ：fetch API 非常轻量，不包含太多额外的功能，开发者可以根据需求自行扩展。
• 灵活性高 ：fetch 的设计更为底层和灵活，开发者可以基于它构建自己的请求封装层。
• Response 处理 ：fetch 默认不会自动处理响应体的内容，开发者需要手动解析，如 .json()、.text() 等。

// Fetch 示例
fetch('/api/user')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 错误处理对比

Axios 错误处理

axios 在处理错误时提供了较为完善的机制，它会自动抛出错误，开发者可以在 catch 块中捕获并处理这些错误。此外，axios 的响应对象中包含了错误的详细信息，如 status、headers 等，方便开发者进行精细化处理。

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Response error:', error.response.status);
    } else if (error.request) {
      console.error('Request error:', error.request);
    } else {
      console.error('Error:', error.message);
    }
  });

Fetch 错误处理

fetch 在错误处理上相对基础，它只会在网络错误时抛出异常，对于 4xx 或 5xx 的 HTTP 状态码，fetch 不会认为是错误，而是将其视为成功的响应。因此，开发者需要手动检查 response.ok 或 response.status 来判断是否出现错误。

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

4. 在 Vue 项目中的使用与封装

Axios 在 Vue 项目中的封装

在 Vue 项目中，使用 axios 可以通过创建一个全局实例的方式，将其配置为全局使用的 HTTP 客户端。这样可以方便地设置默认配置，比如 base URL、headers 等。

// src/utils/axios.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// 请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在请求发送前可以做一些处理
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 在响应到达之前可以做一些处理
  return response;
}, error => {
  // 全局处理错误
  return Promise.reject(error);
});

export default axiosInstance;

在 Vue 组件中使用封装好的 axios 实例：

import axios from '@/utils/axios';

export default {
  name: 'UserProfile',
  data() {
    return {
      user: null,
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        const response = await axios.get('/user/1');
        this.user = response.data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    }
  }
};

Fetch 在 Vue 项目中的封装

fetch 的封装则相对自由，开发者可以根据项目需求自行定义封装逻辑。以下是一个简单的 fetch 封装示例，用于处理常见的 GET 和 POST 请求。

// src/utils/fetch.js
const baseUrl = 'https://api.example.com';

const request = async (url, options = {}) => {
  const response = await fetch(`${baseUrl}${url}`, {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
    ...options,
  });

  if (!response.ok) {
    const message = `Error: ${response.status} - ${response.statusText}`;
    throw new Error(message);
  }

  return response.json();
};

export const get = (url, options) => request(url, { method: 'GET', ...options });
export const post = (url, data, options) => request(url, {
  method: 'POST',
  body: JSON.stringify(data),
  ...options,
});

在 Vue 组件中使用封装好的 fetch 函数：

import { get, post } from '@/utils/fetch';

export default {
  name: 'UserProfile',
  data() {
    return {
      user: null,
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        this.user = await get('/user/1');
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    },
    async saveUser(data) {
      try {
        const result = await post('/user/1', data);
        console.log('User saved:', result);
      } catch (error) {
        console.error('Error saving user:', error);
      }
    }
  }
};

5. 选择建议与结论

什么时候选择 Axios？

• 需要更多功能和更易用的 API ：如果你希望使用请求拦截器、自动 JSON 转换、取消请求等高级功能，axios 是更好的选择。
• 更好的错误处理 ：axios 提供了全面的错误处理机制，可以更方便地捕获和处理请求错误。
• 跨平台支持 ：axios 可以在 Node.js 中使用，这对于需要在服务器端发起 HTTP 请求的场景非常有用。

什么时候选择 Fetch？

• 项目依赖精简 ：如果你希望减少项目的依赖库数量，并且只需要基本的 HTTP 请求功能，fetch 是一个轻量级的选择。
• 原生 API 优势 ：fetch 是浏览器原生支持的 API，因此在浏览器环境下使用时无需担心兼容性问题。

结论

axios 和 fetch 各有优劣，选择哪一个取决于项目的具体需求。在 Vue 项目中，如果你需要一个功能强大且使用方便的 HTTP 客户端，axios 是更好的选择；而如果你追求轻量和灵活，可以考虑使用原生的 fetch 并自行封装。

无论选择哪种工具，都建议根据项目需求进行封装，以便统一管理请求逻辑、错误

处理和响应数据的格式化。

---

希望这篇文章能帮助你更好地理解 axios 和 fetch 的区别，并能够在 Vue 项目中选择和使用最合适的工具。如果你有任何疑问或建议，欢迎留言讨论！