[教程]Vue3深度解析：axios网络请求配置全攻略，新手必看！

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 node.js。在 Vue3 项目中，Axios 是处理网络请求的常用工具。本文将深入解析 Vue3 中使用 Axios 进行网络请求的配置，帮助新手更好地理解和应用。

一、安装 Axios

在 Vue3 项目中，首先需要安装 Axios。可以使用 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

二、创建 Axios 实例

在 Vue3 项目中，通常会在 src/utils 目录下创建一个 request.js 文件，用于创建 Axios 实例并配置。

// src/utils/request.js
import axios from 'axios';
const service = axios.create({ baseURL: 'https://api.example.com', // 设置基础 URL 地址 timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', },
});
export default service;

三、请求拦截器

请求拦截器可以在发送请求之前修改请求配置。

// 添加请求拦截器
service.interceptors.request.use( (config) => { // 在发送请求之前做些什么 return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); }
);

四、响应拦截器

响应拦截器可以在收到响应后对响应数据进行处理。

// 添加响应拦截器
service.interceptors.response.use( (response) => { // 对响应数据做点什么 const res = response.data; if (res.code !== 200) { // 当响应状态码不是 200 时，可以在这里处理错误 return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, (error) => { // 对响应错误做点什么 return Promise.reject(error); }
);

五、在组件中使用 Axios

在 Vue3 组件中，可以使用导入的 Axios 实例来发送网络请求。

<template> <div> <h1>User Information</h1> <p>Name: {{ user.name }}</p> <p>Email: {{ user.email }}</p> </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default { setup() { const user = ref(null); onMounted(async () => { try { const response = await axios.get('https://api.example.com/user'); user.value = response.data; } catch (error) { console.error(error); } }); return { user, }; },
};
</script>

六、总结

本文深入解析了 Vue3 中使用 Axios 进行网络请求的配置，包括安装 Axios、创建 Axios 实例、请求拦截器和响应拦截器等。希望这些内容能帮助你更好地在 Vue3 项目中使用 Axios 进行网络请求。