axios七大特性

axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。它有许多优秀的特性,以下是其中七个主要特性及其详细代码示例:

1. 基于 Promise

axios 的所有请求都返回一个 Promise 对象,这使得异步操作变得非常直观和易于管理。

复制代码
复制代码
`axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});`

2. 支持请求和响应拦截

拦截器允许你在请求发送到服务器或响应返回到客户端之前对它们进行修改。

复制代码
复制代码
`// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
return response;
},
error => {
// 对响应错误做点什么
return Promise.reject(error);
}
);`

3. 转换请求和响应数据

你可以为请求和响应数据指定转换器。

复制代码
复制代码
`axios.defaults.transformRequest = [function (data) {
// 对请求数据进行转换
return JSON.stringify(data);
}];

axios.defaults.transformResponse = [function (data) {
// 对响应数据进行转换
return data;
}];`

4. 取消请求

使用 CancelToken 可以取消一个正在进行的请求。

复制代码
复制代码
`const CancelToken = axios.CancelToken;
let source = CancelToken.source();

axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});

// 取消请求 (请求原因是可选的)
source.cancel('Operation canceled by the user.');`

5. 自动转换 JSON 数据

axios 会自动将 JSON 数据转换为 JavaScript 对象。

复制代码
复制代码
`axios.get('https://api.example.com/data')
.then(response => {
// axios 会自动将 JSON 数据转换为 JavaScript 对象
const data = response.data;
console.log(data);
});`

6. 客户端支持防御 XSRF

axios 库支持库级别的 XSRF(跨站请求伪造)保护。

复制代码
复制代码
`// 当使用 withCredentials 时,axios 会自动设置 XSRF-TOKEN cookie
axios.defaults.xsrfCookieName = 'XSRF-TOKEN'; // 默认值是:XSRF-TOKEN
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'; // 默认值是:X-XSRF-TOKEN`

7. 支持 HTTP 授权

你可以通过配置对象的 auth 属性来自动设置 HTTP 授权头。

复制代码
复制代码
`axios({
method: 'get',
url: 'https://api.example.com/private',
auth: {
username: 'myusername',
password: 'mypassword'
}
});`

在上述示例中,axios 会自动在请求头中添加 Authorization 字段,值为 Basic base64(username:password)

请注意,axios 的特性和用法远不止这些,这些只是其中的一部分。要了解更多关于 axios 的信息,建议查阅其官方文档。

相关推荐
Wect1 分钟前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding14 分钟前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
GISer_Jing16 分钟前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习
竹林81817 分钟前
被The Graph的GraphQL查询坑了三天,我用一个真实DeFi项目把链上数据索引彻底搞懂了
前端·graphql
漫游的渔夫17 分钟前
前端开发者做 Agent:别只会执行,用 4 类失败策略让 AI 知道怎么停
前端·人工智能·typescript
Rabitebla17 分钟前
vector 的骨架:三根指针、模板陷阱与迭代器失效的第一现场
开发语言·数据结构·c++·算法
时空系18 分钟前
第7篇:功能——打造你的工具箱 Rust中文编程
开发语言·网络·rust
用户0595401744620 分钟前
把多级缓存一致性验证从手工测试换成 Pytest 参数化,Bug 排查时间缩短 90%
前端·css
暗不需求21 分钟前
深入理解 LangChain:AI 应用开发框架的工程化实践
前端·langchain
Python私教22 分钟前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源