在前端开发中，我们经常需要从服务器获取数据，比如：

• 登录用户
• 获取商品列表
• 提交订单

这些操作都需要和后端“通信”。而 axios 就是目前最流行的 HTTP 请求库，它能帮你轻松实现这些功能。

---

一、先搞懂：什么是同步？什么是异步？

1. 生活例子：你去面馆吃面

同步（Synchronous）：

你点完面，站在窗口等，直到面煮好才离开。期间不能干别的事。

✅ 缺点：效率低，浪费时间。

异步（Asynchronous）：

你点完面，拿个号码牌，去旁边玩手机。面好了叫你，你再去取。

✅ 优点：不耽误时间，效率高。

---

2. 编程中的同步 vs 异步

// ❌ 同步（阻塞）—— 不推荐
let data = getData(); // 假设这要等 3 秒
console.log(data);    // 必须等 3 秒后才能执行

// ✅ 异步（非阻塞）—— 推荐
getData().then(data => {
    console.log(data); // 3 秒后自动执行
});
console.log("我在等数据..."); // 这句先执行！

结论：网络请求必须是异步的，否则页面会“卡住”。

---

二、为什么用 axios？不用 fetch 或 jQuery？

对比项	axios	fetch	jQuery.ajax
支持 IE	✅（通过 polyfill）	❌（IE 不支持）	✅
自动转换 JSON	✅	❌（需手动 .json()）	✅
请求拦截	✅	❌	❌
响应拦截	✅	❌	❌
取消请求	✅	✅	✅
体积小	✅	✅	❌（太大）

✅ 所以：axios 是目前最强大、最易用的 HTTP 客户端！

---

三、Axios 基本使用（新手必会）

1. 安装 axios

npm install axios

<!-- cdn引入 建议下载下来本地引入 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 发送 GET 请求

import axios from 'axios';

axios.get('https://api.example.com/users')
    .then(response => {
        console.log(response.data); // 获取数据
    })
    .catch(error => {
        console.error('请求失败：', error);
    });

3. 发送 POST 请求

axios.post('https://api.example.com/login', {
    username: '张三',
    password: '123456'
})
.then(response => {
    console.log('登录成功：', response.data);
})
.catch(error => {
    console.error('登录失败：', error);
});

4. 使用 async/await（推荐写法）

async function fetchUsers() {
    try {
        const response = await axios.get('/api/users');
        console.log(response.data);
    } catch (error) {
        console.error('请求失败：', error);
    }
}

---

四、Axios 高级用法（进阶必看）

1. 请求配置项（config）

axios.get('/api/data', {
    params: { id: 123 },           // 查询参数 ?id=123
    headers: { 'Authorization': 'Bearer token' },
    timeout: 5000                  // 超时时间
});

2. 并发请求（同时发多个）

async function getData() {
    const [usersRes, postsRes] = await Promise.all([
        axios.get('/api/users'),
        axios.get('/api/posts')
    ]);
    return { users: usersRes.data, posts: postsRes.data };
}

3. 取消请求（防止重复提交）

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/data', {
    cancelToken: new CancelToken(c => cancel = c)
});

// 想取消时调用
cancel('请求被取消');

4. 下载文件（设置 responseType）

axios.get('/api/download', {
    responseType: 'blob'  // 返回二进制数据
}).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.pdf';
    link.click();
});

---

五、如何封装 axios？（提升开发效率）

在项目中，我们不会每次都写 axios.get()，而是封装一个通用请求函数。

✅ 封装目标：

• 统一基础 URL
• 自动携带 token
• 统一错误处理
• 请求/响应拦截

封装示例：

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

// 创建 axios 实例
const request = axios.create({
    baseURL: 'https://api.example.com', // 所有请求的前缀
    timeout: 10000
});

// 请求拦截器：每次请求前加 token
request.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 响应拦截器：统一处理错误
request.interceptors.response.use(
    response => {
        return response.data; // 直接返回 data，不用每次 .data
    },
    error => {
        if (error.response?.status === 401) {
            // 未登录，跳转登录页
            alert('请先登录');
            window.location.href = '/login';
        }
        return Promise.reject(error);
    }
);

export default request;

✅ 使用封装后的请求：

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

export function getUser(id) {
    return request.get(`/users/${id}`); // 自动带 baseURL 和 token
}

export function login(data) {
    return request.post('/login', data);
}

// 组件中使用
async function loadUser() {
    try {
        const user = await getUser(1);
        console.log(user.name);
    } catch (error) {
        console.error('加载失败');
    }
}

---

六、常见问题与最佳实践

问题	解决方案
请求跨域	后端配置 CORS，或使用代理
token 过期	响应拦截中判断 401，跳转登录
重复请求	使用 CancelToken 或防抖
接口返回错误数据	统一在拦截器中处理
生产环境暴露接口地址	使用 .env 文件配置环境变量

✅ 环境变量配置（.env 文件）

# .env.development
VUE_APP_BASE_API = 'http://localhost:3000'

# .env.production
VUE_APP_BASE_API = 'https://api.example.com'

然后在 axios 中使用：

baseURL: process.env.VUE_APP_BASE_API

---

七、总结：Axios 核心知识点一览表

功能	说明	使用场景
get / post	发送请求	获取数据、提交表单
async/await	异步写法	让异步代码更清晰
拦截器	请求/响应前处理	加 token、错误处理
封装实例	统一配置	项目级请求管理
并发请求	Promise.all	同时加载多个数据
取消请求	防止重复提交	搜索框防抖
下载文件	responseType: blob	导出 Excel/PDF