[教程]揭秘Vue与Axios：轻松实现高效API调用的实战攻略

在现代前端开发中，Vue.js 结合 Axios 是一种高效的数据交互方式。本文将深入探讨如何在 Vue3 中使用 Axios 进行 API 调用，并详细讲解如何通过封装和配置实现高效的 API 调用...

在现代前端开发中，Vue.js 结合 Axios 是一种高效的数据交互方式。本文将深入探讨如何在 Vue3 中使用 Axios 进行 API 调用，并详细讲解如何通过封装和配置实现高效的 API 调用。

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 Node.js 中。它具有以下特点：

• 从浏览器中创建 XMLHttpRequest
• 从 Node.js 发出 HTTP 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防止 CSRF/XSRF

二、在 Vue3 中使用 Axios

1. 创建 Axios 实例和服务配置

首先，在项目的 src/utils 文件夹下新建一个文件命名为 request.js 或类似的名称来定义全局使用的 Axios 实例：

// src/utils/request.js
import axios from 'axios';
const service = axios.create({ baseURL: 'https://localhost:5001/api', // 设置基础 URL 地址
});
export default service;

这段代码创建了一个自定义的 Axios 实例，并指定了基本路径作为所有请求的基础地址。

2. 添加请求与响应拦截器

接着可以在同一文件内继续添加请求和响应拦截器以便于统一管理错误处理逻辑或是附加必要的身份验证信息等操作：

// src/utils/request.js (续)
service.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }
);
service.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); }
);

3. 在组件中使用 Axios

在组件中，你可以使用 this.$http 来调用 API：

export default { methods: { fetchData() { this.$http.get('/data').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); } }
};

三、封装 Axios 请求

在实际项目中，我们通常会封装 Axios 请求，以便于统一管理和复用。

1. 创建 Axios 封装文件

在 src/plugins 文件夹下创建一个名为 axios.js 的文件：

// src/plugins/axios.js
import axios from 'axios';
const Axios = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 5000,
});
Axios.interceptors.request.use( config => { // 添加请求头或其他配置 return config; }, error => { return Promise.reject(error); }
);
Axios.interceptors.response.use( response => { return response; }, error => { return Promise.reject(error); }
);
export default Axios;

2. 在入口文件中注册插件

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Axios from './plugins/axios';
Vue.config.productionTip = false;
Vue.prototype.$axios = Axios;
new Vue({ router, store, render: h => h(App),
}).$mount('#app');

现在，你可以在组件中使用 this.$axios 来调用 API：

export default { methods: { fetchData() { this.$axios.get('/data').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); } }
};

四、总结

通过以上步骤，你可以在 Vue3 中使用 Axios 进行高效的数据交互。封装 Axios 请求可以帮助你更好地管理 API 调用，并提高代码的可读性和可维护性。