悠悠楠杉
网站页面
Ajax常用封装库——Axios的使用，ajax封装和使用
06/10
在 Web 开发中，与服务器进行异步通信是一个常见且重要的任务。传统的 XMLHttpRequest（XHR）对象虽然可以实现这一功能，但其使用方式较为繁琐且不够灵活。为了简化这一过程，许多 JavaScript 库应运而生，其中 Axios 因其强大的功能、简洁的 API 和对 Promise 的支持而备受开发者青睐。
什么是 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它提供了简单的 API 来处理 HTTP 请求，如 GET、POST、PUT、DELETE 等，并支持自动转换 JSON 数据。通过使用 Axios，开发者可以轻松地发送异步请求并处理响应，无需担心复杂的 XMLHttpRequest 实现细节。
快速上手 Axios
安装
在项目中使用 Axios 前，首先需要安装它。如果你正在使用 npm 或 yarn，可以通过以下命令安装：
```bash
npm install axios
或者
yarn add axios
```
发送 GET 请求
```javascript
const axios = require('axios');
axios.get('https://api.example.com/data')
.then(function (response) {
// 成功处理
console.log(response.data);
})
.catch(function (error) {
// 错误处理
console.log(error);
})
.then(function () {
// 总是会执行
});
```
发送 POST 请求
javascript
axios.post('https://api.example.com/data', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
使用 async/await 语法
javascript
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error(error);
}
}
fetchData(); // 调用函数时无需使用 .then() 或 .catch()，直接使用 try/catch 进行错误处理。
Axios 的特性与优势：
- 从浏览器中创建 XMLHttpRequests：Axios 封装了浏览器的原生 XMLHttpRequest，使得开发者可以更简单地实现异步 HTTP 请求。
- 支持 Promise：Axios 的 API 基于 Promise，这意呀着你可以利用 Promise 的特性如
.then()、.catch()和async/await来处理异步操作，使代码更加简洁和易于管理。 - 自动转换 JSON 数据：Axios 自动将响应的 JSON 数据转换为 JavaScript 对象，无需手动解析 JSON。同样地，当发送数据时，Axios 会自动将 JavaScript 对象转换为 JSON 字符串。这大大简化了数据交换的流程。
- 客户端支持防御 XSRF（跨站请求伪造）：Axios 提供了一些配置选项来帮助防止 XSRF 攻击。例如，可以通过设置
xsrfHeaderName和xsrfCookieName来指定携带 CSRF 保护令牌的 HTTP 头和 Cookie 的名称。 - 从 node.js 创建 http 请求：Axios 不只限于浏览器环境，它也可以在 node.js 中使用来创建 HTTP 请求。这使得在服务器端和客户端开发中能够保持一致的 API 使用体验。
- 取消请求：Axios 允许你取消正在进行的请求，通过调用请求实例的
cancel()方法。这在进行大量并发请求或需要在某些条件下停止请求时非常有用。CancelTokenAPI 是取消请求的关键部分。
