Axios 终极指南：从入门到精通，解锁高效网络请求的奥秘

原创已于 2025-09-18 22:58:31 修改 · 804 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#网络 #javascript #前端 #axios

于 2025-09-18 22:56:51 首次发布

前端工程化专栏收录该内容

11 篇文章

订阅专栏

😉 你好呀，我是一名十多年前端开发老兵，深耕 Vue/React 生态，主导过电商、SaaS 等多类型项目架构设计。专注给新人输出可落地的实战干货：从基础语法避坑、工程化配置，到性能优化技巧、面试高频考点，均结合真实项目案例拆解。帮你跳过我踩过的坑，少走 3 年弯路，快速搭建前端知识体系。关注我，一起从 “会写代码” 到 “写好代码”。

文章目录

1. Axios 简介与核心优势

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境。它以简洁的 API 和强大的功能成为前端开发中处理网络请求的首选工具。

跨平台支持

在浏览器中创建 XMLHttpRequest，在 Node.js 中创建 http 请求。

Promise 风格 API

天然支持异步编程，避免回调地狱。

拦截机制

支持请求和响应拦截，便于统一处理认证、日志等。

自动数据转换

自动将请求/响应数据转换为 JSON。

安全防护

客户端支持防御 XSRF（跨站请求伪造）。

取消请求

支持使用 AbortController 取消请求。

2. 基础用法与请求配置

安装

npm install axios

引入

// 使用 ES6 模块
import axios from 'axios';

// 或者 CommonJS
const axios = require('axios');

发送请求示例

GET 请求

// 方式一：直接调用
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 方式二：配置对象
axios({
  method: 'get',
  url: '/user',
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

POST 请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

请求配置（常用选项）

{
  // 请求地址
  url: '/user',

  // 请求方法，默认是 get
  method: 'get', 

  // 基础 URL，将自动加在 url 前面
  baseURL: 'https://some-domain.com/api/',

  // 请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // URL 参数，必须是一个纯对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // 请求体数据，只适用于 'PUT', 'POST', 'DELETE' 和 'PATCH'
  data: {
    firstName: 'Fred'
  },

  // 超时时间（毫秒）
  timeout: 1000,

  // 响应数据类型，默认 'json'
  responseType: 'json', 

  // 跨域请求时是否需要凭证
  withCredentials: false, 
}

3. 响应处理与错误捕获

响应结构

Axios 返回的响应对象包含以下字段：

{
  data: {},       // 响应体
  status: 200,    // 状态码
  statusText: 'OK', // 状态消息
  headers: {},    // 响应头
  config: {},     // 请求配置
  request: {}     // 请求实例
}

错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，服务器返回状态码非 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log(error.request);
    } else {
      // 其他错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

4. 拦截器：请求/响应的中间件魔法

拦截器是 Axios 的核心特性之一，可用于统一处理认证、日志、加载状态等。

请求拦截器

axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 例如：添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截器

axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 未授权，跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

5. 高级特性：取消请求、并发控制、文件下载

取消请求（AbortController）

从 v0.22.0 开始，Axios 支持 AbortController。

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});

// 取消请求
controller.abort();

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求都完成后执行
  }));

文件下载

axios({
  url: '/download',
  method: 'GET',
  responseType: 'blob', // 重要
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

6. 项目实战：封装企业级请求服务

创建实例并封装

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

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础地址
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    console.log(error); 
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      if (res.code === 401) {
        alert('登录已过期，请重新登录');
        localStorage.removeItem('token');
        window.location.reload();
      }
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.log('err' + error);
    return Promise.reject(error);
  }
);

export default service;

使用封装的请求服务

// src/api/user.js
import request from '@/utils/request';

export function getUserInfo(userId) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { userId }
  });
}

export function updateUserInfo(data) {
  return request({
    url: '/user/update',
    method: 'post',
    data
  });
}

7. TypeScript 集成与类型安全

定义类型

// src/types/api.ts
export interface ResponseData<T = any> {
  code: number;
  message: string;
  data: T;
}

export interface User {
  id: number;
  name: string;
  age: number;
}

在请求中使用类型

// src/api/user.ts
import request from '@/utils/request';
import { ResponseData, User } from '@/types/api';

export function getUserInfo(userId: number) {
  return request.get<ResponseData<User>>('/user/info', {
    params: { userId }
  });
}

增强 axios 实例的类型

// src/utils/request.ts
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

service.interceptors.response.use(
  response => {
    return response.data; // 直接返回 data
  },
  error => {
    return Promise.reject(error);
  }
);

export default service;

8. 常见问题与解决方案

问题	解决方案
跨域请求被阻止	后端配置 CORS，或前端开发环境使用代理（如 webpack-dev-server 的 `proxy`）
发送请求时携带 Cookie	设置 `withCredentials: true`
重复请求取消	使用 `AbortController` 在新请求前取消旧请求

const controller = new AbortController();
axios.get('/user', { signal: controller.signal });
controller.abort(); // 取消请求

9. 最佳实践总结

封装 axios 实例

统一配置 baseURL、timeout、headers 等。

使用拦截器

统一处理 token、错误提示、加载状态。

类型安全

在 TypeScript 项目中为请求和响应定义接口。

统一错误处理

避免在每个请求中重复写错误逻辑。

取消不必要的请求

提升性能，避免资源浪费。

文件处理

下载用 responseType: 'blob'，上传注意 Content-Type。

通过以上方式，你可以高效、优雅地使用 Axios 处理网络请求，显著提升开发效率与用户体验。