Axios的使用简单说明

axios****请求方式和参数

axios 可以发送 ajax 请求,不同的方法可以发送不同的请求:

  1. axios.get:发送get请求
  2. axios.post:发送post请求
  3. axios.put:发送put请求
  4. axios.delete:发送delete请求

无论哪种方法,第一个参数为请求的后端接口
因为 post 和 put 请求方式,参数会放到请求体中,而 get 和 delete 请求方式,参数会放在 url 中
所以
1.post 和 put 请求时,第二个参数是一个对象,存储要发送给后端的数据
2.get 和 put 请求时:可以自己通过问号传值,也可以将参数对象包裹起来,放在第二个参数

axios****返回值(响应结构)

axios 会创建一个对象,里面有很多属性, axios 会将服务端返回的数据放到一个叫做 data 的属性中

补充:axios改造ajax的回调函数

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function ajax(type, url) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open(type, url)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
data = JSON.parse(xhr.responseText)
// 根据实际情况进行处理
resolve(data)
}
}
xhr.send()
})
return p
}
function f1() {
ajax('get', 'http://127.0.0.1:8000/app/f1/').then(data => {
console.log(data);
})
}
function f2() {
ajax('get', 'http://127.0.0.1:8000/app/f2/').then(data => {
console.log(data);
})
}
f1()
f2()
</script>
</body>
</html>
相关推荐
benbenAItalk8 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_962885728 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎12348 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
陈随易10 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周11 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师11 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing9812 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
EatFan12 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
梦想平凡12 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
IT_陈寒12 小时前
Redis的Set操作居然能把我的服务整挂了?
前端·人工智能·后端