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.mzph.cn/diannao/18563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2】:向量与矩阵

向量 既有大小又有方向的量叫做向量 向量的模 向量的长度 单位向量 (只表示方向不表示长度) 向量的加减运算 向量求和 行向量与列向量的置换 图形学中竖着写 向量的长度计算 点乘&#xff08;计算向量间夹角&#xff09; 点乘满足的运算规律 交换律、结合律、分配…

单例模式(Java实现)

1. 懒汉式线程不安全 public class LazyUnsafeSingleton {private static LazyUnsafeSingleton singleton;private LazyUnsafeSingleton(){}public static LazyUnsafeSingleton getInstance() {if (singleton null) singleton new LazyUnsafeSingleton();return singleton;}…

MouseBoost Pro for Mac v3.4.7 鼠标右键助手 安装教程【支持M芯片】

MouseBoost Pro for Mac v3.4.7 鼠标右键助手 安装教程【支持M芯片】 原文地址&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/139201501

Kibana创建ElasticSearch 用户角色

文章目录 1, ES 权限参考2, 某应用的管理员权限&#xff1a;可以open/close/delete/cat/read/write 索引3, 某应用的读写权限&#xff1a;可以cat/read/write 索引 &#xff08;不能删除索引或数据&#xff09;4, 某应用的只读权限 1, ES 权限参考 https://www.elastic.co/gui…

Notepad++不显示CRLF的方法

View -> Show Symbol -> 去掉勾选 Show All Characters

【教程】PaddleOCR高精度文字识别

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ PaddleOCR/doc/doc_ch/quickstart.md at main PaddlePaddle/PaddleOCR GitHub 安装 pip install paddlepaddle -i https://mirror.baidu.com/pypi/s…

C++是微软发明的吗?为什么会有这么多的编译器?哪个才是官方的

C现在由C标准委员会维护。称作标准C。C标准委员会只是定义C的标准&#xff0c;具体的实现需要各个编译器厂商去实现&#xff0c;如微软实现的C版本为VC。Borland公司实现的是BC。各个编译器基本是遵循C标准的。仅有很小的一部分不同。 C不是微软发明&#xff0c;C是语言 但是有…

新版idea配置git步骤及项目导入

目录 git安装 下载 打开git Bash 配置全局用户名及邮箱 查看已经配置的用户名和邮箱 在IDEA中设置Git 问题解决 项目导入 git安装 下载 进入官网 Git - Downloads 点击所属本机系统&#xff0c;window如下图 选择64位安装 按照默认步骤一直下一步即可 打开git Bash …

HackTheBox-Machines--Beep

Beep测试过程 1 信息收集 nmap端口扫描 gryphonwsdl ~ % nmap -sC -sV 10.129.137.179 Starting Nmap 7.94 ( https://nmap.org ) at 2024-05-28 14:39 CST Nmap scan report for 10.129.229.183 Host is up (0.28s latency). Not shown: 988 closed tcp ports (conn-refused…

Nacos 2.x 系列【12】配置加密插件

文章目录 1. 前言2. 安装插件2.1 编译2.2 客户端2.3 服务端 3. 测试 1. 前言 为保证用户敏感配置数据的安全&#xff0c;Nacos提供了配置加密的新特性。降低了用户使用的风险&#xff0c;也不需要再对配置进行单独的加密处理。 前提条件&#xff1a; 版本:老版本暂时不兼容&…

Leetcode621. 任务调度器

Every day a Leetcode 题目来源&#xff1a;621. 任务调度器 类似题目&#xff1a;1953. 你可以工作的最大周数 解法1&#xff1a;贪心 本质上来说&#xff0c;我们需要构造一个尽量短的&#xff0c;相同元素间隔 > (n1) 的序列。 用一个数组 cnt 统计每个任务的次数。…

【御控工业物联网】 Java JSON结构转换、JSON结构重构、JSON结构互换(17):数组To对象——键值互换属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、核心构件之转换映射三、案例之《JSON数组 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换…

介绍Django Ninja框架

文章目录 安装快速开始特性详解自动文档生成定义请求和响应模型异步支持中间件支持测试客户端 结论 Django Ninja是一个基于Python的快速API开发框架&#xff0c;它结合了Django和FastAPI的优点&#xff0c;提供了简单易用的方式来构建高性能的Web API。 安装 使用以下命令安…

CSS 介绍及用法,常用属性

一、CSS介绍 A. 简介 CSS全称&#xff1a;全称为层叠样式表&#xff08;Cascading Style Sheets&#xff09;&#xff0c;是一种用于描述网页外观和格式的计算机语言。CSS可以使网页的布局更加丰富和多样化&#xff0c;并且可以将样式信息与网页内容分离&#xff0c;使得网…

如何防止重复提交请求?

下面说的防重操作&#xff0c;如支付功能订单提交业务、表单提交、手机验证码功能。 订单提交为什么需要防重呢&#xff1f;想像一下你在商城购物&#xff0c;你选中商品点击提交订单&#xff0c;如果这时网络延迟没有返回成功提示&#xff0c;你又多点了几次。每点一次都会发送…

SpringBoot入门,idea搭建一个简单SpringBoot项目

初学者搭建一个简单的SpingBoot项目 在IntelliJ IDEA中直接创建一个新的Spring Boot项目非常直观便捷&#xff0c;下面是详细的步骤指南&#xff1a; 第1步&#xff1a;打开IntelliJ IDEA并创建新项目 打开IntelliJ IDEA。选择菜单栏的“File” > “New” > “Project”…

Github 2024-05-29 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-29统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目3PHP项目1PHP:流行的Web开发脚本语言 创建周期:4710 天开发语言:C, PHP协议类型:OtherStar数量:37340 个Fork数量:7657 次…

MySQL 按年月日统计,创建视图

按日统计&#xff0c;前十天 SELECTdays.day dateField,COALESCE(COUNT(archive_no), 0) AS total_quantityFROM(SELECTDATE_FORMAT(DATE_SUB(now(), INTERVAL a.a DAY), %Y-%m-%d) AS dayFROM(SELECT 0 AS a UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION…

003 仿muduo实现高性能服务器组件_前置知识

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;仿muduo &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多知识 文章目录 前言时间轮timewheel设计正则表达式介绍&#xff08;了解知道怎么使用&#xff09;通用型any容器的实现 小结 …

让 AI 回答更精准 来学学这些Prompt入门小技巧

&#x1f3a5;前言 最近一直在研究各种 AI 提问相关的方法&#xff0c;一顿输入后&#xff0c;get到了好多有趣又好玩的提问小技巧。今天就来和小伙伴们安利下&#xff0c;平常在向AI提问时&#xff0c;最最基础&#xff0c;且最最实用的6种提示词方法。 那废话不多说&#x…