封装使用Axios进行前后端交互
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.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.api.api.com', // 设置后端API的基本URL
timeout: 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) => {
// 处理错误
});
},
},
};
这是一个简单的示例，展示了如何在Vue组件中使用封装的Axios实例来发送GET请求。
常见应用场景
身份验证和授权
在企业应用中，常见的用例之一是处理身份验证和授权。你可以在Axios的拦截器中添加认证信息，以确保只有授权用户可以访问受保护的资源。
错误处理和日志记录
企业级应用通常需要良好的错误处理和日志记录机制。通过Axios的拦截器，你可以集中处理错误，记录错误信息，以便后续分析和修复。
文件上传和下载
对于文件上传和下载，Axios同样适用。你可以使用axios.post()来上传文件，使用axios.get()来下载文件，并处理相应的响应数据。
总结
Axios是一个功能强大的HTTP客户端，可以帮助你在任何应用中进行前后端数据交互。
通过封装和使用Axios，你可以更轻松地处理请求、响应、错误和拦截器等各方面的问题。
在企业应用中，它可以帮助你构建稳健和可维护的前端代码，以应对复杂的需求和场景。