Promise和事件轮询

Promise和事件轮询

今日目标:

1.Promise

  • 要求:能够清楚的说出Promise的特性和静态方法

2.事件轮询

  • 要求:能够理解清楚同步和异步在底层的实现机制

00-回顾

# ajax概述
async javascript and xml: 异步的js和xml`作用`: 实现客户端和服务器端的数据通信`优点`: 无刷新提交数据,用户体验好`缺点`: 对网络SEO支持不友好`工作原理`:通过js的一个内置构造函数'XMLHttpRequest'来实现`发送异步请求`,`接收响应的数据`# ajax发送get请求:
1. 创建一个实例对象
let xhr = new XMLHttpRequest()2. 配置请求方式和请求地址
// 请求方式和请求地址都是由后端提供接口文档
xhr.open('请求方式', '请求地址?键名=键值&键名=键值...')3. 发送请求
xhr.send()4. 监听请求状态
xhr.onreadystatechange = function() {// 如果请求状态等于4 ,并且http状态码等于200if(xhr.readyState === 4 && xhr.status === 200) {// 响应回来的数据是字符串格式let res = JSON.parse(xhr.responseText)}
}# ajax发送post请求
1. 创建一个实例对象
let xhr = new XMLHttpRequest()2. 配置请求方式和请求地址
// 请求方式和请求地址都是由后端提供接口文档
xhr.open('请求方式', '请求地址’)3. 配置请求头
// 配置请求头的目的是为了调整参数的格式
// xhr.setRequestHeader('Content-Type', '提交的参数格式')
// 默认格式:字符串形式,没有对参数做格式处理
xhr.setRequestHeader('Content-Type', 'text/plain')
// 以表单数据的格式提交参数
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 以json格式提交参数
xhr.setRequestHeader('Content-Type', 'application/json')4. 发送请求
xhr.send('键名=键值&键名=键值...')5. 监听请求状态
xhr.onreadystatechange = function() {// 如果请求状态等于4 ,并且http状态码等于200if(xhr.readyState === 4 && xhr.status === 200) {// 响应回来的数据是字符串格式let res = JSON.parse(xhr.responseText)}
}# readyState: 请求状态码
0:请求未初始化
1:请求已建立
2:请求已接收
3:请求处理中
4:请求已完成# http网络传输协议状态码
200:请求成功
304:Not Modified: 未修改。 本次请求的内容和上一次一样,直接从浏览器缓存中将数据拿出来,不再走服务器请求
400:Bad Request: 错误请求。 本次请求没有被服务器正确解析
401:Unauthorized: 未授权。 没有权限访问该接口。 没有登录的时候
403:Forbidden: 拒绝访问。 任何情况下,都不可以访问该接口
404:Not Found: 服务器地址,参数,请求方式错误的时候
405 Method Not Allowed 当前请求的方式服务器不支持
5XX/6XX: 服务器错误500 Internal Server Error 未知服务器错误
503 Service Unavailable 服务器超负荷# axios
基于Promise的一个HTTP网络通信的库
`记得引入`<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script># axios发送get请求
'方式一':
axios.get('请求地址?键名=键值&键名=键值').then((res) => {// res: 请求成功后,后端的响应数据   }).catch((err) => {// err: 请求失败后的错误信息
})'方式二'
axios.get('请求地址', {params: {属性: 值,属性:}
}).then((res) => {// res: 请求成功后,后端的响应数据   }).catch((err) => {// err: 请求失败后的错误信息
})# axios发送post请求
axios.post('请求地址', {属性: 值,属性:}).then((res) => {// res: 请求成功后,后端的响应数据   }).catch((err) => {// err: 请求失败后的错误信息
})// 注意: axios发送post请求默认是以'json格式'提交参数
// 以表单数据格式提交参数:
引入一个qs库:<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
axios.post('请求地址', Qs.stringify{属性: 值,属性:}).then((res) => {// res: 请求成功后,后端的响应数据   }).catch((err) => {// err: 请求失败后的错误信息
})# 同步和异步
`同步`:代码从上往下依次执行,前面的代码没有执行完成,后面就不会执行。可能会造成代码阻塞
`异步`:代码从上往下依次执行,如果遇到了异步,就跳过异步,继续执行所有的同步,最后执行异步# 异步的四种情况
定时器里面的回调函数
事件里面的回调函数
`ajax请求里面的回调函数`: ajax请求的响应顺序是不可控的
Promise里面的回调函数# 回调地狱
`概念`:当后面的接口需要使用前面接口响应的数据时,把后面的ajax请求写入前面请求的then回调函数里面。这种套娃现象就是回调地狱`作用`: 解决了ajax请求响应顺序不可控的问题`缺点`: 代码阅读体验差,不易维护

01-Promise

`作用`: 更加优雅的解决ajax请求响应顺序不可控的问题`特性`1. Promise是一个构造函数,需要通过new关键词实例化。实例化的过程中,需要接收一个函数参数,该函数又要接收两个函数参数,分别是resolve和rejectlet p = new Promise((resolve, reject) => {})2. Promise具有三种状态,默认的是`pennding进行中`,还有`fulfilled已完成``rejected已失败`3. 可以通过调用resolve方法将pennding进行中的状态修改为fulfilled已完成,同时会触发实例对象的then方法,顺便将参数带过去4. 可以通过调用reject方法将pennding进行中的状态修改为rejected已失败,同时会触发实例对象的catch方法,顺带将参数带过去5. 无论是已完成还是已失败,只要Promise的状态发生了改变,都会触发实例对象的finally方法# Promise支持链式调用
// 注意: 为什么Promise支持链式调用? 原型对象上then,catch和finally方法会返回一个新的Promise的实例对象# Promise解决ajax请求的响应顺序不可控的原理:
'Promise的实例对象的then方法必须要等到Promise的resolve方法执行后才可以触发。'
`步骤`1. 我们可以在前一个Pomise里面发起ajax请求,
2. 请求完成后,再把请求的结果resolve出去,
3. 在实例对象的then方法中接收并发起新的请求# Promise的静态方法
// all, any和race的区别
// all: 同时执行多个Promise,等到最后一个Promise成功执行后,才结束; 如果其中有一个Promise执行失败,就直接结束
// any: 同时执行多个Promise,只要有一个成功执行,就结束,如果都失败了,才结束, 并且报错
// race: 竞赛。无论成功还是失败,只要有一个结束了,就结束// allSettled(es2020): 无论成功或失败,直到最后一个执行结束才结束// resolve: 强制将Promise的状态修改为已完成// reject: 强制将Promise的状态修改为已失败

02-async和await

`es7的语法。 最优雅的解决ajax请求响应顺序不可控``语法`// async: 写在函数前面,表示函数里面有异步任务
// await: 写在Promise的前面,等待一个Promise的好的结果 resolve的结果
async 函数名() {await 一个Promise
}// 注意:await必须要等到resolve的结果才可以继续后面的代码
// 原理:将异步代码变成同步执行
async function fun() {let r1 = await new Promise((resolve, reject) => {axios.post('http://115.159.153.85:8001/postTest', {name: '小飞飞'}).then(res => {console.log('请求1', res);resolve(res.data.msg.slice(0, 3))})})console.log(222);// console.log(r1, '111111111111');
}fun();

03-axios的其他语法。(推荐上一种)

axios({method: '请求方式',url: '请求地址',params|data: {属性名:值属性名:值}
}).then(res => {}).catch(err => {})

04-事件轮询

`作用`:探讨同步任务和异步任务在浏览器中的执行机制`单线程`:js是一个单线程的语言,代码从上往下逐行执行,可能会造成代码阻塞
`执行栈`:调用栈,用来存储代码执行环境。代码执行环境可以执行代码。 '先入后出'
`任务队列`:异步任务会被依次放入任务队列中,分为宏任务和微任务。'先进先出'=> 宏任务:整个js代码,周期定时器,延时定时器=> 微任务:Promise的原型对象的then方法
`web API`: 接收并分配异步任务。也会消耗定时器的时间`事件轮询`=> 当打开了浏览器后,事件轮询就开始启动了=> 先执行一个宏任务,然后再清空整个微任务队列(将所有微任务执行完毕)=> 循环往复,直到执行完所有的代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764217.shtml

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

相关文章

python数据容器--集合

什么是集合 列表可以修改&#xff0c;支持重复元素且有序 元组、字符串不可修改&#xff0c;支持重复元素且有序 集合无序&#xff0c;不可重复 定义一个集合 #去重&#xff0c;且无序 #集合无序因此不支持下标访问 #但集合和列表一样&#xff0c;是允许修改的 my_set{&quo…

机器学习——线性回归(头歌实训)

头歌机器学习实训代码、答案&#xff0c;如果能够帮到您&#xff0c;希望可以点个赞&#xff01;&#xff01;&#xff01; 如果有问题可以csdn私聊或评论&#xff01;&#xff01;&#xff01;感谢您的支持 目录 第1关&#xff1a;简单线性回归与多元线性回归 第2关&#…

JVM加类加载器

文章目录 JVM内存模型内存分配策略JVM内存分配策略优化的最佳实践对象头类加载类加载器有哪几种&#xff1f;如何实现一个自定义类加载器&#xff1f;类加载机制如何影响性能调优&#xff1f; JVM内存模型 JVM&#xff08;Java虚拟机&#xff09;内存模型描述了Java虚拟机在执…

矩阵理论的概念间的组合关系的公式

矩阵理论的概念间的组合关系的公式 现在很火执的人工智能技术&#xff0c;要求很高的数学基础知识。 除了微积分就是线性代数的内容了。自动微分框架是人工 智能技术的底层框架。其实就是实现了微积分的各种函数 的微积分运算而矣。线性代数的内容应用于计算机 的软件中的各个…

Elasticsearch 的 scroll API

对于大量数据&#xff0c;可以使用 Elasticsearch 的 scroll API 来分批次地读取数据&#xff0c;以避免一次性读取所有数据造成的内存负担。这段代码使用滚动查询&#xff08;scroll&#xff09;来分批次地读取数据。首先&#xff0c;它发送初始的搜索请求&#xff0c;并获取第…

Vue3:网页项目中路由的设计和配置

为了避免我每次建项目配路由的时候都回去翻网课&#xff0c;打算整一博客 路由设计 不同网页的路由设计思路基本相同&#xff0c;分为一级路由和二级路由&#xff0c;基本设计思路如下图 以我之前做过的招新系统管理端为例&#xff0c;可设计出如下路由 路由配置 还是以招新系…

递归的个人总结

递归函数&#xff08;递去、回归&#xff09;是函数不断的调用自己&#xff1b; 可以按照如下来理解&#xff1a;func1中调用func2&#xff0c;func2中调用func3; func3函数返回了&#xff0c;继续执行func2中的语句&#xff1b;func2执行完了&#xff0c;继续执行func1之后的…

ky10.aarch64安装Jenkins

参考地址&#xff1a;《安装部署 Jenkins》 前言 有war包和rpm两种安装方式&#xff0c;如果是长期使用更加推荐rpm的安装方式&#xff0c;可以更好的管理Jenkins&#xff1b; 我此次安装jenkins主要用于测试和简单的个人使用&#xff0c;所以选择更轻便的war安装。 1 下载J…

网络安全知识核心之ARP协议

概述 地址解析协议&#xff0c;即 ARP&#xff08;Address Resolution Protocol&#xff09;&#xff0c;是根据 IP 地址获取物理地址的一个TCP/IP 协议。 发送 ARP 请求的以太网数据帧 广播 到以太网上的每个主机&#xff0c;ARP 请求帧中包含了目的主机的 IP 地址。 目的主…

RK3568基于openHarmony3.2版本之GT911触摸屏调试成功

RK3568基于openHarmony3.2版本之GT911触摸屏 开发环境调试过程HDF架构配置内核配置(选择性配置)效果展示总结开发环境 ubuntu版本:20.04 openharmony版本:3.2.4-release 核心板:RK3568 触摸屏型号:GT911 博主想说句话:太太太不容易了,这源码的坑不是一般的多,在总结那…

每日一题 --- 209. 长度最小的子数组[力扣][Go]

长度最小子数组 题目&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符合条件的子数组&#xff0c…

C++检测多显示器并把窗口显示在不同显示器上(完整源码)

初级代码游戏的专栏介绍与文章目录-CSDN博客 早先大部分应用都不考虑多显示的问题。 如果是多窗口应用&#xff0c;子窗口不会被限制在父窗口里面的&#xff0c;可以轻松把窗口拖到不同的显示器上。 但是很多流行的界面都是一个全屏主窗口&#xff0c;然后其他窗口都只能在主窗…

【docker】查看并拷贝容器内文件

一、查询容器 查询所有容器 docker ps查询名为os11的容器 docker ps | grep os11查询名为os11的容器&#xff08;包含不运行的&#xff09; docker ps -a| grep os11 docker ps [option] 显示结果介绍如下&#xff1a; 参考&#xff1a;[https://blog.51cto.com/u_15009374/31…

Linux离线部署gitLab及使用教程

一、下载gitLab的linux系统rpm包 地址&#xff1a;Index of /gitlab-ce/yum/el7/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 找到这个最新版 点击下载 二、上传到linux系统 笔者是在windows系统下的vmware虚拟机中部署安装的&#xff0c;虚拟机中安装了cent…

腾讯在GDC 2024展示GiiNEX AI游戏引擎现已投入《元梦之星》中开发使用,展示强大AIGC能力

在近日举行的GDC 2024游戏开发者大会上&#xff0c;腾讯揭开了其AI Lab团队精心打造的GiiNEX AI游戏引擎的神秘面纱。这款引擎依托先进的生成式AI和决策AI技术&#xff0c;为游戏行业带来了革命性的变革。 相关阅读&#xff1a;腾讯游戏出品&#xff01;腾讯研效AIGC&#xff…

【DataWhale学习】用免费GPU线上跑chatGLM、SD项目实践

用免费GPU线上跑chatGLM、SD项目实践 ​ DataWhale组织了一个线上白嫖GPU跑chatGLM与SD的项目活动&#xff0c;我很感兴趣就参加啦。之前就对chatGLM有所耳闻&#xff0c;是去年清华联合发布的开源大语言模型&#xff0c;可以用来打造个人知识库什么的&#xff0c;一直没有尝试…

分别使用TCP/UDP实现互相实时发送消息,接收消息功能

什么是TCP? TCP(传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层协议。它是互联网协议套件中的一部分,用于在网络上可靠地传输数据。TCP协议的主要特点包括: 面向连接:在TCP通信中,通信双方在通信之前必须先建立连接。连接建立后,数据传输完成后还需要显式…

Apache James数据库存储用户信息的密码加密问题

项目场景 Apache James邮件服务器使用数据库来存储用户信息的密码加密问题&#xff1a; 将James的用户改为数据库存储James密码是如何加密验证的 1.将James的用户改为数据库存储 1、修改存储方式 找到james-2.3.2\apps\james\SAR-INF\config.xml 找到<users-store>标…

elementUI(Vue2)和elementPlus(Vue3)图标icon差异

Vue2用法 <i class"el-icon-edit"></i><el-button type"primary" icon"el-icon-search">搜索</el-button> Vue3用法 <!-- 使用 el-icon 为 SVG 图标提供属性 --> <template><div><el-icon :siz…

Python的re模块进行正则表达式操作时的常用方法[回顾学习]

re 模块是 Python 中用于处理正则表达式的标准库模块。通过 re 模块&#xff0c;可进行字符串匹配、搜索和替换等各种操作。 有几个常用的方法&#xff1a;# re.match(pattern, string)&#xff1a;从字符串开头开始匹配模式&#xff0c;并返回匹配对象。适合用于确定字符串是否…