一文带你理清Axios的有关问题

htmledit_views">

前言

我们对于Axios并不陌生，每天我们都在使用它。

Axios 是一个基于 Promise 的 HTTP 客户端，主要用于发送 HTTP 请求。它能够简化与服务器进行通信的过程，比如发送 GET、POST、PUT、DELETE 等请求。

接下来我先介绍他的几个使用方法，也就是我们平常用的几个请求方法。

这里指的是单独配置的请求：

1.GET

html" title=javascript>javascript">axios.get('https://api.example.com/users').then(response => {console.log(response.data); // 输出服务器返回的用户数据}).catch(error => {console.error('Error:', error); // 处理错误});

同时，你也可以加上自己的 params 选项传递。

html" title=javascript>javascript">axios.get('https://api.example.com/users', {params: {id: 123  // 传递查询参数}
}).then(response => {console.log(response.data);});

2.POST

html" title=javascript>javascript">axios.post('https://api.example.com/users', {name: 'John',age: 30
}).then(response => {console.log(response.data); // 返回新创建的用户数据}).catch(error => {console.error('Error:', error);});

3.PUT

html" title=javascript>javascript">axios.put('https://api.example.com/users/123', {name: 'John Doe',age: 31
}).then(response => {console.log(response.data); // 返回更新后的用户数据}).catch(error => {console.error('Error:', error);});

4.DELETE

html" title=javascript>javascript">axios.delete('https://api.example.com/users/123').then(response => {console.log('User deleted');}).catch(error => {console.error('Error:', error);});

5.all

最后这一个不是请求方法，我也是最近看文档才知道，但是不是很难，只是才知道也可以这样用，我们都知道Promise.all（）这个方法，是用来做并发的，这个其实也是同样的作用。用法如下：

html" title=javascript>javascript">axios.all([axios.get('/data1'),axios.get('/data2')
])
.then(axios.spread((response1, response2) => {console.log('Data 1:', response1.data);console.log('Data 2:', response2.data);
}));

6. (Async/Await)搭配使用

Axios和async/await非常搭配，可以让异步代码变得更清晰。

html" title=javascript>javascript">async function fetchData() {try {const response = await axios.get('https://api.example.com/data');console.log(response.data);} catch (error) {console.error('Error:', error);}
}fetchData();

以上呢就是我们单独配置请求时候使用的几个方法吧，只适用我们做一些调研或者学习使用的。但是在我们的项目中，我们都是需要封装Axios请求的。

7.Axios请求封装

首先我给大家先说一下我的思路：

        1.创建Axios的实例：设置基础配置

        2.添加请求拦截器：可以在请求发送之前做一些操作，如添加认证Token

        3.添加响应拦截器：可以在响应返回时全局做一些错误处理或者数据处理

接下来看代码，只是看思路

html" title=javascript>javascript">import axios from 'axios';// 1. 创建 Axios 实例
const service = axios.create({baseURL: 'https://api.example.com', // API的基础URLtimeout: 5000, // 请求超时的时间headers: {'Content-Type': 'application/json'}
});// 2. 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么，例如添加 tokenconst token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`; // 携带 token}return config;},error => {// 请求错误处理return Promise.reject(error);}
);// 3. 响应拦截器
service.interceptors.response.use(response => {// 处理响应数据const res = response.data;if (res.code !== 200) {  // 假设后端返回的状态码为200表示成功console.error(res.message || 'Error');return Promise.reject(new Error(res.message || 'Error'));} else {return res;  // 返回成功的数据}},error => {// 处理响应错误，比如 token 过期、网络错误等console.error('Error: ' + error.message);return Promise.reject(error);}
);// 导出封装的实例
export default service;

那么我们在接下来就可以使用这个文件，在api.js文件中

html" title=javascript>javascript">import service from './request'; // 引入封装好的模块// 登录
export function userLogin(data) {return service.post('/login', data)
}

那么在组件中我们需要引入就行了，然后再去这样使用

html" title=javascript>javascript"><script setup>
import { ref } from 'vue';
import { userLogin } from './api'; // 引入封装好的API// 定义响应式变量
const username = ref('');
const password = ref('');
const error = ref(null);// 处理登录请求的函数
const handleLogin = async () => {error.value = null; // 重置错误信息const loginData = {username: username.value,password: password.value};try {// 使用 async/await 调用登录请求const response = await userLogin(loginData);console.log('Login success:', response); // 登录成功后的处理// 在这里可以进行页面跳转或保存 token} catch (err) {console.error('Login failed:', err);error.value = 'Login failed. Please check your credentials and try again.'; // 显示错误信息}
};
</script>