当前位置: 首页 > news >正文

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的回调函数

<!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>

http://www.lryc.cn/news/357150.html

相关文章:

  • 查找list集合中,持续时间>=ContinueTime的数据集合,保存在新的list中
  • nginx 反向代理配置详解
  • 微信小程序毕业设计-农场驿站平台系统项目开发实战(附源码+论文)
  • CAN总线应用协议CANopen
  • htop安装不了怎么解决
  • vue 笔记02
  • MySQL8.0免安装及phpmyadmin配置
  • 【目标解算】相机内外参数详细解读+坐标系转换
  • 【Unity】颜色混合计算
  • Vue源码解析
  • Linux---网络相关配置
  • MATLAB分类与判别模型算法:基于Fisher算法的分类程序【含Matlab源码 MX_002期】
  • 长文总结 | Python基础知识点,建议收藏
  • centos中使用Docker安装rabbitmq记录
  • STM32系列-STM32介绍
  • 网络原理 一
  • xcode配置快速打开终端命令行工具教程
  • AIGC降重:如何2分钟降低论文AI率和查重率?推荐使用SpeedAI科研小助手
  • Blazor入门-连接MySQL的简单例子:列出数据+简单查询
  • CEEMDAN +组合预测模型(CNN-Transfromer + XGBoost)
  • 箭头函数的意义和函数的二义性
  • 618必买的数码好物有哪些?盘点兼具设计与实用的数码好物分享
  • 【好书分享第十三期】AI数据处理实战108招:ChatGPT+Excel+VBA
  • 001 CentOS 7.9 安装及配置jdk-8u411-linux-x64.tar.gz
  • Revit二次开发-WPF ProgressBar 执行程序中显示进度条
  • React:构建Web应用的未来
  • 【Elasticsearch】Centos7安装Elasticsearch、kibana、IK分词
  • IDEA中各种Maven相关问题(文件飘红、下载依赖和启动报错)
  • Android 13 VSYNC重学习
  • std::move和左值右值