axios的两种异步方式对比

这两种方式本质上都是异步的，都是基于 Promise 的机制，但它们在语法风格、可读性、错误处理、控制流方面有一些关键区别。下面我来帮你全面对比：

语法结构对比

示例对比

方式一：.then().catch()（链式调用）

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

• 优点：语法简洁，适合快速调用。

• 缺点：嵌套多层 .then() 时容易变得混乱（回调地狱）。

方式二：async/await（同步风格）

async function fetchData() {try {const res = await axios.get('/api/data');console.log(res.data);} catch (err) {console.error(err);}
}

• 优点：逻辑清晰，异常处理统一，适合复杂流程。

• 缺点：必须在 async 函数中使用，略微多一层结构。

错误处理对比

控制流对比（多个请求）

.then() 写法：

axios.get('/api/user').then(user => {return axios.get(`/api/posts?user=${user.id}`);}).then(posts => {console.log(posts.data);}).catch(err => console.error(err));

async/await 写法：

async function getUserPosts() {try {const user = await axios.get('/api/user');const posts = await axios.get(`/api/posts?user=${user.data.id}`);console.log(posts.data);} catch (err) {console.error(err);}
}

async/await 更像同步代码，逻辑更清晰，调试更容易。

总结建议

如果你正在开发 Vue 项目中的 API 模块，我建议你封装所有请求为 async 函数，这样在组件中调用时更清晰、更易维护。

企业级 API 请求模块示例

基于 axios，支持以下功能：

• ✅ 自动注入 Token（如 JWT）

• ✅ 全局错误处理（如 401、500）

• ✅ 请求/响应拦截器

• ✅ Loading 状态支持

• ✅ 自动重试机制（可选）

• ✅ 支持异步 async/await 调用

项目结构建议

src/
├── api/
│   ├── axios.js         # axios 实例配置
│   ├── request.js       # 封装请求方法
│   └── modules/
│       └── user.js      # 用户相关接口

1.axios.js — 创建 axios 实例

// src/api/axios.js
import axios from 'axios';const instance = axios.create({baseURL: '/api', // 可根据环境配置timeout: 10000,headers: {'Content-Type': 'application/json'}
});// 请求拦截器
instance.interceptors.request.use(config => {const token = localStorage.getItem('access_token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
}, error => Promise.reject(error));// 响应拦截器
instance.interceptors.response.use(response => {return response.data;
}, error => {const { response } = error;if (response) {if (response.status === 401) {console.warn('未授权，请重新登录');// 可跳转登录页或清除 token} else if (response.status >= 500) {console.error('服务器错误');}} else {console.error('网络异常');}return Promise.reject(error);
});export default instance;

2.request.js — 封装请求方法

// src/api/request.js
import axios from './axios';export const get = (url, params = {}) => {return axios.get(url, { params });
};export const post = (url, data = {}) => {return axios.post(url, data);
};export const put = (url, data = {}) => {return axios.put(url, data);
};export const del = (url, params = {}) => {return axios.delete(url, { params });
};

3. modules/user.js — 用户接口模块

// src/api/modules/user.js
import { get, post } from '../request';export const login = data => post('/login', data);
export const getUserInfo = () => get('/user/info');
export const logout = () => post('/logout');

4. Vue 中调用示例

import { login, getUserInfo } from '@/api/modules/user';async function handleLogin(formData) {try {const res = await login(formData);localStorage.setItem('access_token', res.access_token);console.log('登录成功:', res.user);} catch (err) {console.error('登录失败:', err);}
}

可选增强功能