【JavaScript】axios
最编程
2024-04-25 10:04:01
...
- 基础使用
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script>
axios.get('https://study.duyiedu.com/api/herolist').then(res=> {
console.log(res.data)
})
</script>
- get - params
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script>
axios.get('https://study.duyiedu.com/api/herolist', {
params: {
// 这里配置的 query, axios 会自动配置为 url 编码
// 可以帮助我们转义特殊字符 id: 'a&b=3' 如果手动写query 需要
id: 'aaa' // https://study.duyiedu.com/api/herolist?id=aaa
}
}).then(res=> {
console.log(res.data)
})
</script>
id: 'a&b=3' // https://study.duyiedu.com/api/herolist?id=a%26b%3D3
- post
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script>
axios.post('https://study.duyiedu.com/api/user/reg', {
// {"loginId":"aaa","loginPwd":"123123","nickname":"棒棒鸡"} 自动转为 JSON 格式和对应的请求头
loginId: 'aaa',
loginPwd: '123123',
nickname: '棒棒鸡'
}).then(res => {
console.log(res.data) // res.data 为响应体数据 axios 会自动解析为 JSON 格式
})
</script>
- 创建实例
const instance = axios.create({
baseURL: 'https://study.duyiedu.com/api',
timeout: 1000,
});
create 创建 axios 实例,预先配置某些配置项,减少重复代码。
- 拦截器
【Ajax】axios 二次封装请求响应拦截器_ajax响应拦截器-****博客
上一篇: 使用蓝鲸标准操作启用应用程序发布
推荐阅读
-
向过去学习的 JavaScript - 绑定方法的实现
-
JavaScript 向过去学习--执行上下文和执行堆栈的机制
-
javascript 基础教程 [向过去的教程学习]
-
以史为鉴 - JavaScript图书文摘(一)
-
JavaScript 向过去学习
-
基于 Vue3 的 Axios 异步请求
-
贪婪算法在 Python、JavaScript、Java、C++ 和 C# 中的多种实现及其在硬币变化、分数骑士、活动选择和使用哈夫曼编码的最小生成树问题中的应用实例
-
JavaScript decodeURI 函数
-
JavaScript toPrecision 方法
-
问:如何在 javascript 中获取 flexbox 和网格布局的行数和列数?