当前位置：首页 > news >正文

封装使用Axios进行前后端交互

news 2025/7/19 7:44:47

Axios是一个强大的HTTP客户端，用于在Vue.js应用中进行前后端数据交互。本文将介绍如何在Vue中使用Axios，并通过一个企业应用场景来演示其实际应用。

Axios简介

公众号：Code程序人生，个人网站：https://creatorblog.cn

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

支持Promise API，易于使用和集成。
提供了强大的拦截器，用于在请求和响应过程中执行自定义逻辑。
具有自动转换JSON数据的能力。
能够处理请求和响应的取消操作。
支持浏览器环境和Nodejs环境。

大家要有一个概念，Axios是一个独立的库，不依赖于任何框架，Vue、React、Nodejs、原生，任何能用它的地方都可以用它。很多初学者有种错觉，认为Vue和Axios强挂钩。Axios是一个很强大的第三方库，不依赖于任何主体。

Axios基本用法

安装Axios

首先，确保你的项目中已经安装了Axios。如果没有安装，可以使用以下命令进行安装：

npm install axios

发送GET请求

以下是一个简单的Vue组件方法，用于发送GET请求并处理响应：

<template><div><button @click="fetchData">获取数据</button><div>{{ responseData }}</div></div>
</template><script>
import axios from 'axios';export default {data() {return {responseData: null,};},methods: {fetchData() {axios.get('https://www.baidu.com', {params: {query1: 'query1value1',query2: 'query2value2',}},headers: {'Authorization': 'Bearer token',}).then((response) => {this.responseData = response.data;}).catch((error) => {console.error('请求失败:', error);});},},
};
</script>

axios.get()的入参：

第一个参数是要请求的url，必填。
第二个参数是要传递的配置对象config，用于设置请求的各种选项，例如请求头、请求参数、超时设置等，GET请求要传递的query参数要放到params属性下，选填。

在上述示例中，我们导入了Axios并使用axios.get()方法发送GET请求。响应数据存储在responseData中。

发送POST请求

如果需要发送POST请求，可以使用axios.post()方法：

<script>
import axios from 'axios';export default {// ...其他组件选项methods: {sendData() {const params = {key1: 'value1',key2: 'value2',};axios.post('https://your-post-api-url', params, {headers: {'Content-Type': 'application/json',}}).then((response) => {console.log('成功发送数据:', response.data);}).catch((error) => {console.error('请求失败:', error);});},},
};
</script>

axios.post()的入参：

第一个参数是要请求的url，必填。
第二个参数data，表示要发送的请求数据。通常在向服务器提交数据时使用，例如表单数据或JSON数据，选填。
第三个参数config，用于设置请求的各种选项，比如headers等，选填。

上述示例中，我们使用axios.post()发送POST请求，同时传递了需要发送的数据对象。

Axios的进阶用法

拦截器

Axios的拦截器功能允许我们在请求发送前和响应返回后执行自定义操作。例如，你可以在请求中添加认证信息、记录日志等。以下是一个示例：

// 添加请求拦截器
axios.interceptors.request.use((config) => {// 在请求发送前执行的操作，例如添加认证信息// config.headers['Authorization'] = `Bearer ${token}`;return config;},(error) => {return Promise.reject(error);}
);// 添加响应拦截器
axios.interceptors.response.use((response) => {// 在响应返回后执行的操作，例如处理响应数据return response.data;},(error) => {// 处理响应错误return Promise.reject(error);}
);

错误处理

在Axios中，你可以使用.catch()来处理请求或响应的错误。通常，这包括网络错误、HTTP状态码错误以及后端返回的自定义错误信息。

axios.get('https://www.baidu.com').then((response) => {// 处理成功响应}).catch((error) => {if (error.response) {// 处理HTTP错误状态码console.error('HTTP错误:', error.response.status);} else if (error.request) {// 处理请求没有响应的情况console.error('请求无响应');} else {// 处理其他错误console.error('其他错误:', error.message);}});

Axios整体封装

为什么要封装Axios

封装Axios有以下几个重要的原因：

代码重用性：通过封装Axios，我们可以将HTTP请求的逻辑集中在一个地方，以便在整个应用程序中重用。
错误处理：封装可以使错误处理变得更加一致，包括网络错误、HTTP状态码错误以及后端返回的自定义错误信息。
拦截器：Axios的拦截器功能可以用于在请求发送前和响应返回后进行操作，如添加请求头、认证、日志记录等。
安全性：通过封装，可以更容易地添加安全性措施，例如CSRF令牌的自动附加。

封装Axios

首先，我们将创建一个独立的Axios实例并进行封装。在Vue项目中，通常在一个单独的文件中完成此任务，例如axios.js：

// axios.jsimport axios from 'axios';const instance = axios.create({baseURL: 'https://api.api.api.com', // 设置后端API的基本URLtimeout: 10000, // 设置请求超时时间
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在请求发送前可以进行一些操作，如添加认证信息// config.headers['Authorization'] = `Bearer ${token}`;return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 在响应返回后可以进行一些操作，如处理响应数据return response.data;},(error) => {// 处理响应错误，可以根据不同的HTTP状态码采取不同的处理策略if (error.response) {// 处理HTTP错误状态码const status = error.response.status;if (status === 401) {// 处理未授权错误} else if (status === 404) {// 处理资源未找到错误} else {// 处理其他HTTP错误}} else if (error.request) {// 处理请求没有响应的情况} else {// 处理其他错误}return Promise.reject(error);}
);export default instance;

在Vue组件中使用封装的Axios

现在，我们可以在Vue组件中轻松地使用封装后的Axios实例。首先，确保在组件文件中导入封装的Axios：

import axios from './axios'; // 导入封装的Axios实例

然后，在组件中使用Axios发送请求：

export default {methods: {fetchData() {axios.get('/data') // 发送GET请求，'/data'是相对于基本URL的相对路径.then((response) => {// 处理响应数据}).catch((error) => {// 处理错误});},},
};