239
社区成员
发帖
与我相关
我的任务
分享个人技术博客——Axios基础使用技术
| 这个作业属于哪个课程 | 福州大学软件工程 2024 |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | 个人技术博客 |
| 其他参考文献 | 无 |
目录
Axios 使用总结
概述
Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了非常简洁的 API，支持 GET、POST、PUT、DELETE 等常用请求方式。在前端开发中，Axios 常用于向后端服务器发送请求并处理响应数据。学习 Axios 是因为它简化了 AJAX 请求，支持拦截器、请求取消等高级功能，解决了原生 XMLHttpRequest 和 fetch 的一些限制。
1.技术详述
1.1 安装 Axios
我们通过 npm 安装 Axios：
npm install axios
1.2 请求拦截器和响应拦截器
在 Axios 中，拦截器可以在请求发送前和响应返回后做一些公共操作。
1.2.1 请求拦截器
instance.interceptors.request.use(
function(config) {
// 在发送请求前附加 token
var token = localStorage.getItem("token");
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
1.2.2 响应拦截器
instance.interceptors.response.use(
function(response) {
// 直接返回响应数据
return response;
},
function(error) {
// 检查错误响应并处理特定的状态码
if (error.response && error.response.status === 401) {
// 如果是认证错误，则在控制台输出
console.log("Authentication failed");
}
// 将错误传递下去
return Promise.reject(error);
}
);
1.3 请求取消
有时我们需要取消某个请求，比如在用户快速切换页面时，可以避免不必要的请求。Axios 提供了 CancelToken 来实现这一功能。
// 定义取消请求的变量
var cancelRequest;
// 创建axios的CancelToken实例
var cancelTokenSource = axios.CancelToken.source();
// 发起GET请求
instance.get("/users", {
cancelToken: cancelTokenSource.token // 使用cancel token
})
.then(function(response) {
// 请求成功时打印响应数据
console.log(response.data);
})
.catch(function(error) {
// 检查请求是否被取消
if (axios.isCancel(error)) {
console.log("Request canceled", error.message);
} else {
// 打印出其他错误
console.error("Error:", error);
}
});
// 取消请求的函数赋值
cancelRequest = cancelTokenSource.cancel;
// 执行取消操作
cancelRequest("Operation canceled by the user.");
2.技术详概
2.1 选择 Axios 的原因
-
拦截功能强化：通过设置拦截器，Axios 优化了请求发送前和接收响应后的统一处理流程。这使得像自动追加 token 和统一处理响应错误等操作变得简单。
-
优化的请求封装：Axios 的高效 API 简化了对服务请求的管理，相较于微信的 `wx.request`，它让代码更加简洁、封装性更强。
-
Promise 的完美集成：Axios 基于 Promise 设计，它与 async/await 无缝配合，极大提升了代码的逻辑清晰性和阅读体验。
2.2 在微信小程序中集成 Axios
在微信小程序中使用 Axios，需要将 Axios 库引入并进行封装。
1. 安装并引入 Axios
npm install axios --save
2. 在项目的 utils 目录下创建一个 request.js 文件，进行封装
```javascript
// utils/request.js
import axios from 'axios';
// 创建 axios 实例
const request = axios.create({
baseURL: 'https://api.example.com', // 设定基准 URL
timeout: 5000, // 定义请求超时时长
headers: {
'Content-Type': 'application/json' // 设置默认请求头
}
});
// 设置请求拦截器，用于在请求头中携带 token
request.interceptors.request.use(
(config) => {
// 从本地存储获取 token
const token = wx.getStorageSync('token');
// 如果 token 存在，则在请求头中携带
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 设置响应拦截器，用于统一处理错误
request.interceptors.response.use(
(response) => {
// 直接返回响应数据
return response.data;
},
(error) => {
// 弹窗提示请求错误
wx.showToast({
title: '请求失败',
icon: 'none'
});
return Promise.reject(error);
}
);
// 导出 axios 实例
export default request;
2.3 遇到的问题：请求失败时无法统一处理
在项目中，如果多个请求都失败，将难以统一处理错误，尤其是在多个 API 请求时。
解决方案：
使用 Axios 的响应拦截器，在请求失败时统一处理错误。
```javascript
instance.interceptors.response.use(
response => response,
error => {
console.error("Global error handler:", error);
return Promise.reject(error);
}
);
```
2.4 问题：跨域请求错误
在开发过程中，遇到了一些跨域问题。浏览器默认会阻止跨域请求。
解决方案：
配置 CORS 代理服务。
instance.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
3.技术总结
Axios, 作为一个强大的 HTTP 客户端库，在我的开发实践中起到了核心作用。它不仅使得微信小程序中的网络请求处理变得更加高效，而且增强了代码的整洁性与可维护性。通过深入研究文档和积极应对实际问题，我不仅解决了使用过程中遇到的挑战，还提升了自己的编程技巧。Axios 的拦截器和请求取消机制允许我优化 HTTP 请求的管理，从而提升用户体验。我实现了请求的封装，统一的错误处理，以及请求重试机制，这些都使项目的网络层变得更加稳定和可扩展。此次经历不仅让我对 HTTP 请求和响应的处理流程有了更深刻的理解，也为我未来的项目开发提供了丰富的经验。
...全文
请发表友善的回复…
发表回复
