同步代码和异步代码、回调地狱、Promise链式调用、async和awat、事件循环EventLoop、宏任务和微任务、Promise.all静态方法

本文主要是介绍同步代码和异步代码、回调地狱、Promise链式调用、async和awat、事件循环EventLoop、宏任务和微任务、Promise.all静态方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

同步代码和异步代码

在这里插入图片描述

异步代码举例

定时器、事件、AJAX、回调函数

回调地狱

回调函数是一个异步的任务,回调函数嵌套回调函数就组成了回调地狱
可读性差、异常捕获困难、耦合性严重
举例:一旦省份报错,后面的就无法获取

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回调地狱</title>
</head><body><form><span>省份:</span><select><option class="province"></option></select><span>城市:</span><select><option class="city"></option></select><span>地区:</span><select><option class="area"></option></select></form><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标:演示回调函数地狱* 需求:获取默认第一个省,第一个市,第一个地区并展示在下拉菜单中* 概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱* 缺点:可读性差,异常无法获取,耦合性严重,牵一发动全身*/axios({url: 'http://hmajax.itheima.net/api/province',method: 'GET'}).then(res => {const pname = res.data.list[0]document.querySelector('.province').innerHTML = pname// 根据省获取城市axios({url: 'http://hmajax.itheima.net/api/city',method: 'GET',params: { pname }}).then(res => {const cname = res.data.list[0]document.querySelector('.city').innerHTML = cname// 根据省份和城市获取地区axios({url: 'http://hmajax.itheima.net/api/area',method: 'GET',params: { pname, cname }}).then(res => {document.querySelector('.area').innerHTML = res.data.list[0]})})})</script>
</body></html>

Promise链式调用(可以解决回调函数嵌套问题)

在这里插入图片描述

  <script>/*** 目标:掌握Promise的链式调用*///  依靠 then的回调函数中, 返回一个 Promise对象 就可以在 then后面继续.then 了const p = new Promise((resolve, reject) => {resolve('成功1')})p.then(res => {console.log(res)return new Promise((resolve, reject) => {resolve(res + '  成功2')})}).then(res => {console.log(res)return new Promise((resolve, reject) => {resolve(res + '  成功3')})}).then(res => {console.log(res)})</script>

在这里插入图片描述

解决回调地狱

1.使用then方法返回新Promise对象特性,一直串联下去,称为Promise的链式调用
2.then回调函数中,return值会传给then方法生成的新Promise对象
3.Promise链式调用解决回调函数嵌套问题

 /*** 目标:把回调函数嵌套代码,改成 Promise 链式调用结构* 需求:获取默认第一个省,第一个市,第一个地区并展示在下拉菜单中*/let pname = ''axios({url: 'http://hmajax.itheima.net/api/province',method: 'GET'}).then(res => {pname = res.data.list[0]document.querySelector('.province').innerHTML = pname// 根据省份获取地区return axios({url: 'http://hmajax.itheima.net/api/city',method: 'GET',params: {pname: pname}})}).then(res => {document.querySelector('.city').innerHTML = res.data.list[0]return axios({url: 'http://hmajax.itheima.net/api/area',method: 'GET',params: {pname: pname,cname: res.data.list[0]}})}).then(res => {document.querySelector('.area').innerHTML = res.data.list[0]})

async和await的使用(也可以解决回调地狱,比promise更简便)

代替promise、then方法
在async修饰的函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值
await会阻止异步函数内代码继续执行,原地等待结果
在这里插入图片描述

async和await只能处理成功的回调

async和await函数捕获错误i
使用:try…catch 语句标记要尝试的语句块,并指定一个出现异常时抛出的响应

try{
//要执行的代码
}catch(err){
//err接收的是,错误信息
//try里代码,如有错误信息,直接进入这里执行
console.log(err)
}

事件循环

    console.log('', 1);setTimeout(() => {console.log('', 2);}, 0)console.log('', 3);

js是单线程,间歇函数是个异步任务,它会等所有的同步任务执行完之后在执行
在这里插入图片描述
在这里插入图片描述

宏任务和微任务

在这里插入图片描述

Promise.all()

等待机制:会等待所有的Promise对象的成功结果返回才会执行then方法
一但有一个Promise对象失败了,都会执行错误结果
在这里插入图片描述

<script>const arr = []arr.push(axios({url: 'http://hmajax.itheima.net/api/weather',method: 'GET',params: {city: '110100'}}),axios({url: 'http://hmajax.itheima.net/api/weather',method: 'GET',params: {city: '310100'}}),axios({url: 'http://hmajax.itheima.net/api/weather',method: 'GET',params: {city: '210100'}}))console.log('arr:', arr);const p = Promise.all(arr)p.then(res => {console.log('res:', res);document.querySelector('ul').innerHTML = res.map(item => {return `<li>${item.data.data.area}</li>`})}).catch(err => {console.log('err:', err);})</script>

在这里插入图片描述

这篇关于同步代码和异步代码、回调地狱、Promise链式调用、async和awat、事件循环EventLoop、宏任务和微任务、Promise.all静态方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/830803

相关文章

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Linux之计划任务和调度命令at/cron详解

《Linux之计划任务和调度命令at/cron详解》:本文主要介绍Linux之计划任务和调度命令at/cron的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux计划任务和调度命令at/cron一、计划任务二、命令{at}介绍三、命令语法及功能 :at

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析