JavaScript网络请求_Axios与Fetch API高级用法-js教程-PHP中文网

JavaScript网络请求_Axios与Fetch API高级用法

幻影之瞳

发布： 2025-11-22 21:10:02

原创

514人浏览过

Axios和Fetch是前端网络请求核心工具，Axios支持拦截器、自动JSON转换和请求取消，适合复杂项目；Fetch为浏览器原生API，轻量且支持流处理，适用于简单场景。通过自定义实例、封装函数、统一错误处理及使用AbortController取消请求，可提升代码可维护性和健壮性。两者可根据项目需求选择或共存，关键在于规范统一。

javascript网络请求_axios与fetch api高级用法

在现代前端开发中，网络请求是与后端交互的核心手段。Axios 和 Fetch API 是目前最常用的两种方式。它们各有优势，掌握其高级用法能显著提升代码的可维护性和健壮性。

1. Axios 高级配置与拦截器

Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js，提供了丰富的配置选项。

自定义实例：可以创建独立的 Axios 实例，设置基础 URL、超时时间、请求头等。

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

这样所有通过 apiClient 发出的请求都会自动携带这些配置。

立即学习“Java免费学习笔记（深入）”；

请求与响应拦截器：可用于统一处理认证、日志、错误提示等。

// 请求拦截器
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 处理未授权
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  } );

拦截器极大简化了全局逻辑处理，避免重复代码。

2. Fetch API 高级用法与封装

Fetch 是浏览器原生提供的 API，无需引入额外库，但默认不发送 Cookie，且不会 reject HTTP 错误状态码。

手动处理响应状态：需检查 ok 属性或 status 来判断请求是否成功。

Hot Tattoo AI

人工智能纹身生成器，提供独特的纹身创意

查看详情

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
  credentials: 'include' // 携带 Cookie
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('Fetch error:', err));

封装 Fetch 提高复用性：可以封装通用逻辑，如自动解析 JSON、统一错误处理。

async function request(url, options = {}) {
  const config = {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options.headers
    }
  };

  const res = await fetch(url, config);

  if (!res.ok) {
    const errorData = await res.json().catch(() => ({}));
    throw new Error(errorData.message || res.statusText);
  }

  return res.json();
}

使用封装后的函数更简洁：

request('/api/profile', { method: 'GET' })
.then(data => console.log(data))
.catch(err => alert(err.message));