Axios 从入门到实战封装全解析（附异步/拦截器/生命周期）

Axios 从入门到实战封装全解析（附异步/拦截器/生命周期）

前言：本文基于实际开发中的对话拆解，从Axios基础用法、项目封装、核心概念（异步、线程、拦截器）到完整生命周期，层层递进，适合前端开发者快速吃透Axios实战逻辑，解决日常接口请求中的常见疑问。

一、核心前提：项目中Axios封装代码（实战基础）

先贴出项目中最常用的Axios封装代码（下文所有解析均围绕此代码展开），基于Vue+Ant Design Vue，适配大多数前端项目：

import axios from 'axios'
import { message } from 'ant-design-vue'
import { API_BASE_URL } from '@/config/env'

// 创建 Axios 实例
const myAxios = axios.create({
  baseURL: API_BASE_URL, // 接口基础地址
  timeout: 60000, // 超时时间60秒
  withCredentials: true, // 跨域请求自动带cookie（保持登录态）
})

// 全局请求拦截器（发请求前执行）
myAxios.interceptors.request.use(
  function (config) {
    // 可在此统一添加token、请求头等
    return config
  },
  function (error) {
    return Promise.reject(error)
  },
)

// 全局响应拦截器（请求返回后执行）
myAxios.interceptors.response.use(
  function (response) {
    const { data } = response
    // 未登录逻辑：40100为后端约定的未登录状态码
    if (data.code === 40100) {
      // 非登录相关请求且不在登录页，跳转登录并携带回调地址
      if (
        !response.request.responseURL.includes('user/get/login') &&
        !window.location.pathname.includes('/user/login')
      ) {
        message.warning('请先登录')
        window.location.href = `/user/login?redirect=${window.location.href}`
      }
    }
    return response // 将响应数据返回给业务代码
  },
  function (error) {
    // 处理HTTP错误（404、500、超时等）
    return Promise.reject(error)
  },
)

export default myAxios

说明：封装后导出的myAxios，在业务代码中通常命名为request，供全局调用（如下文的fetchExcelData函数）。

二、Axios核心基础：是什么+常用方法

2.1 Axios本质

Axios是前端最流行的网络请求工具，核心作用是「实现前端与后端的通信」（拿数据、提交数据），底层基于Promise，支持浏览器和Node.js环境，自带拦截器、JSON自动转换等便捷功能。

通俗理解：Axios就是前端和后端说话的"快递员"，负责把前端的请求送过去，把后端的数据带回来，还能自动处理一些繁琐的细节（如请求头、超时）。

2.2 Axios常用方法（实战必记）

日常开发中90%的场景用以下5种方法，结合config配置对象使用：

1. GET（获取数据）：axios.get(url, config)，参数通过config.params拼接在URL后

2. POST（提交数据）：axios.post(url, data, config)，data是请求体，适用于提交表单、复杂数据

3. PUT（全量更新数据）：axios.put(url, data, config)

4. DELETE（删除数据）：axios.delete(url, config)

5. 万能写法（最灵活）：axios(config)，即项目封装中使用的方式，可灵活配置method、url、data等

补充：config是请求配置对象，核心属性包括headers（请求头）、params（GET参数）、data（POST参数）、timeout（超时时间）、withCredentials（跨域带cookie）等。

三、关键概念：Axios + await 异步逻辑解析

3.1 核心关系

• Axios：负责发起网络请求，执行后返回Promise对象（不是直接返回数据），属于异步操作（耗时操作，不阻塞主线程）。

• await：关键字，作用是"等待Promise执行完成，拿到最终返回结果"，只能用在async函数内部。

3.2 异步的体现（重点）

很多人会混淆"异步"和"多线程"，结合前端JS特性说明：

1. JS是单线程的：同一时间只能执行一段代码，不能真正"并行"，但不会卡死在耗时操作上。

2. Axios异步的实现：JS主线程执行到await axios(...)时，会把"发请求"委托给浏览器的网络线程（浏览器多线程能力），主线程继续执行其他代码（如页面渲染、按钮点击），等后端返回数据后，再回到await位置继续执行后续代码。

示例（业务代码）：

async fetchExcelData(params) {
  try {
    console.log(1);
    // 异步请求：主线程不等待，委托浏览器网络线程处理
    const response = await request({
      url: '/word/excel/query_excel_data_byFilePath',
      method: 'POST',
      data: params
    });
    console.log(2); // 只有请求完成后才会执行
  } catch (e) {
    console.error('请求异常', e);
  }
}

执行顺序：打印1 → 发起请求（主线程去干别的） → 请求完成 → 打印2，全程不阻塞页面。

四、拦截器：为什么注册后就生效？

4.1 拦截器本质

myAxios.interceptors.request.use(...) 和 myAxios.interceptors.response.use(...) 是「拦截器注册」，不是普通函数定义------执行这两行代码时，拦截器就绑定到myAxios实例上，后续所有通过该实例发起的请求，都会自动经过拦截器。

类比：给快递站装了安检机，所有包裹（请求/响应）都会自动过安检，不用手动操作。

4.2 拦截器执行时机

• 请求拦截器：发请求前执行，可用于统一添加token、修改请求头、打印请求日志等，必须return config，否则请求无法发出。

• 响应拦截器：后端返回数据后、业务代码拿到数据前执行，可用于统一处理未登录、错误提示、数据格式化等，必须return response，否则业务代码拿不到数据。

4.3 不生效的常见场景（避坑）

1. 未使用封装的myAxios，直接使用原生axios（未注册拦截器）。

2. 创建了多个axios实例，只给其中一个注册了拦截器。

3. 请求未到达后端（跨域、超时、网络错误），直接进入响应拦截器的error回调。

4. 拦截器中忘记return config（请求拦截器）或return response（响应拦截器）。

五、Axios完整生命周期（实战必懂）

Axios的生命周期即"一次请求的完整一生"，结合项目封装代码，按执行顺序拆解，分为「初始化阶段」和「每次请求阶段」：

5.1 初始化阶段（项目启动时，只执行一次）

1. 导入axios、message等依赖，从配置文件导入API_BASE_URL。

2. 通过axios.create()创建myAxios实例，配置baseURL、timeout、withCredentials等全局参数。

3. 注册请求拦截器和响应拦截器，绑定到myAxios实例上。

4. 导出myAxios，供业务代码导入使用。

5.2 每次请求阶段（业务调用时，每次请求都执行）

1. 业务代码调用request（即myAxios），传入url、method、data等config配置。

2. 请求拦截器执行：修改config（如加token），return config后，发起真正的网络请求。

3. 浏览器开启网络线程，向后端发送HTTP请求（JS主线程不等待，异步执行）。

4. 后端处理请求（如查询Excel数据），返回响应结果。

5. 响应拦截器执行：判断响应状态（如未登录40100跳转登录），return response。

6. 业务代码通过await拿到response，解析数据并处理后续逻辑（如判断code是否为0000）。

5.3 生命周期极简流程图

项目启动
   ↓
创建myAxios实例 → 注册请求/响应拦截器 → 导出实例
   ↓
【每次请求都执行】
业务调用request() → 请求拦截器执行 → 发送网络请求（异步）
   ↓
后端返回响应 → 响应拦截器执行（处理未登录/错误） → return response
   ↓
业务代码拿到数据，执行后续逻辑

六、总结（核心重点）

1. Axios是前端网络请求的核心工具，基于Promise，支持异步、拦截器等便捷功能。

2. 项目封装Axios的核心目的：统一配置、统一处理未登录、统一错误提示，提升开发效率。

3. await的作用是简化Promise写法，让异步代码像同步代码一样直观，但其底层依然是异步非阻塞。

4. 拦截器注册后永久生效，每次请求自动触发，无需手动调用，注意避免常见不生效场景。

5. Axios生命周期分为初始化（一次）和请求执行（多次），掌握流程可快速排查接口请求问题。

结尾：本文基于实际开发对话整理，覆盖Axios实战中的核心疑问，适合新手入门和开发者巩固基础，如有补充或疑问，欢迎评论区交流～