回调函数地狱及其解决方法——Promise链式调用以及async函数和await

一、什么是回调函数地狱?

    > 在回调函数一直向下嵌套回调函数,形成回调函数地狱

二、回调函数地狱问题?

    > 可读性差
    > 异常捕获困难
    > 耦合性严重

<!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://ajax-api.itheima.net/api/province' }).then(result => {console.log(result)const pname = result.data.data[0]document.querySelector('.province').innerHTML = pname//获取默认第一个城市axios({ url: 'http://ajax-api.itheima.net/api/city', params: { pname } }).then(result => {console.log(result)const cname = result.data.data[0]document.querySelector('.city').innerHTML = cname//获取默认第一个地区axios({ url: 'http://ajax-api.itheima.net/api/area', params: { pname, cname } }).then(result => {console.log(result)const area = result.data.data[0]document.querySelector('.area').innerHTML = area})})}).catch(error => {console.dir(error)})</script>
</body></html>

三、Promise - 链式调用

概念:依靠 then()方法会返回一个新生成的 Promise 对象特性,继续串联下一环任务,直到结束

细节:then()回调函数中的返回值,会影响新生成的 Promise 对象最终状态和结果

好处:通过Promise链式调用,解决回调函数嵌套问题

总结:

1.什么是 Promise 的链式调用?

    > 使用 then 方法返回新 Promise 对象特性,一直串联下去

2.then 回调函数中,return 的值会传给哪里?

    > 传给 then 方法生成的新 Promise 对象

<!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>Promise_链式调用</title>
</head><body><script>/*** 目标:掌握Promise的链式调用* 需求:把省市的嵌套结构,改成链式调用的线性结构*///1.创建Promise,模拟请求省份名字const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('河北省')}, 2000)})//2.获取省份名字const p2 = p.then(result => {console.log(result)//3.创建Promise,模拟请求城市名字return new Promise((resolve, reject) => {setTimeout(() => {resolve(result + '----邢台')}, 2000)})})//4.获取城市名字const p3 = p2.then(result => {console.log(result)//创建Promise,模拟请求地区名字return new Promise((resolve, reject) => {setTimeout(() => {console.log(result + '---信都区')}, 2000)})})//获取地区名字p3.then(result => {console.log(result)})//then()原地的结果是一个新的Promise对象console.log(p2 === p);</script>
</body></html>

四、Promise - 链式调用应用(解决回调函数地狱问题)

目标:使用 Promise 链式调用,解决回调函数地狱问题

做法:每个 Promise 对象中管理一个异步任务,用 then 返回 Promise 对象,串联起来

<!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>Promise链式调用_解决回调地狱</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>/*** 目标:把回调函数嵌套代码,改成Promise链式调用结构* 需求:获取默认第一个省,第一个市,第一个地区并展示在下拉菜单中*/let pname = ''//获取省份Promise对象axios({ url: 'http://ajax-api.itheima.net/api/province' }).then(result => {// console.log(result)pname = result.data.data[0]document.querySelector('.province').innerHTML = pname//获取城市Promise对象return axios({ url: 'http://ajax-api.itheima.net/api/city', params: { pname } })}).then(result => {console.log(result)const cname = result.data.data[0]document.querySelector('.city').innerHTML = cname//获取地区Promise对象return axios({ url: 'http://ajax-api.itheima.net/api/area', params: { pname, cname } })}).then(result => {console.log(result)const area = result.data.data[0]document.querySelector('.area').innerHTML = area})</script>
</body></html>

五、async函数和await

定义:

async 函数是使用 async 关键字声明的函数。async 函数是 asyncFunction 构造函数的实例,并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 promise 的异步行为,而无需刻意地链式调用 promise。

概念:

在 async 函数内,使用 await 关键字取代 then 函数,等待获取 Promise 对象成功状态的结果值

async函数和await_捕获错误:

使用:try...catch 语句标记要尝试的语句块,并指定一个出现异常时抛出的响应。

语法:

六、async函数和await_解决回调函数地狱问题

<!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>async函数和await_解决回调函数地狱</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>/*** 目标:掌握async和await语法,解决回调函数地狱* 概念:在async函数内,使用await关键字,获取Promise对象"成功状态"结果值* 注意:await必须用在async修饰的函数内(await会阻止"异步函数内"代码继续执行,原地等待结果)*/async function getData() {try {//try包裹可能产生错误的代码const pObj = await axios({ url: 'http://ajax-api.itheima.net/api/province' })const pname = pObj.data.data[0]const cObj = await axios({ url: 'http://ajax-api.itheima.net/api/city', params: { pname } })const cname = cObj.data.data[0]const aObj = await axios({ url: 'http://ajax-api.itheima.net/api/area', params: { pname, cname } })const area = aObj.data.data[0]document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = area} catch (error) {//catch接受错误信息//如果try中某行代码报错后,try中剩余的代码不会执行了console.dir(error)}}getData()</script>
</body></html>

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

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

相关文章

大数据时代,区块链是如何助力数据开放共享的?

在大数据时代&#xff0c;区块链技术以其独特的优势&#xff0c;为数据开放共享提供了强有力的支持。以下是区块链助力数据开放共享的几个主要方面&#xff1a; 1. 增强数据安全性与隐私保护 加密安全&#xff1a;区块链技术采用先进的加密算法&#xff0c;如国密非对称加密技…

【高中数学/指数函数/单调性】写出函数f(x)=4^x-2^x+2的单调区间 (陈永明老师您错了!)

【问题】 写出函数f(x)4^x-2^x2的单调区间 【问题来源】 《陈永明讲评数学题-高中习题归类研讨》第20页 例2&#xff0c;该书由上海科技教育出版社出版&#xff0c;是2022年1月第一版。 【陈永明老师的解答】 【用Canvas绘制的实际图线】 我有一个习惯&#xff0c;就是在理…

【优秀python算法设计】基于Python网络爬虫的今日头条新闻数据分析与热度预测模型构建的设计与实现

1 绪论 1.1 背景与意义 随着互联网的快速发展和移动互联技术的普及&#xff0c;作为新兴的资讯平台&#xff0c;今日头条成为了用户获取新闻资讯、时事热点和个性化推荐的重要渠道。大量用户在今日头条上浏览、阅读并产生热度&#xff0c;使得今日头条成为了观察舆论热点和分…

面试题012-数据库-MySQL(日志+优化)

面试题012-数据库-MySQL(日志优化) 目录 面试题012-数据库-MySQL(日志优化)题目自测题目答案1. MySQL中常见的日志有哪些&#xff1f;2. 慢查询日志有什么用&#xff1f;3. binlog 主要记录了什么&#xff1f;4. redo log 如何保证事务的持久性&#xff1f;5. binlog 和 redo l…

pdf格式过大怎么样变小 pdf文件过大如何缩小上传 超实用的简单方法

面对体积庞大的 PDF 文件&#xff0c;我们常常需要寻找有效的方法来缩减其大小。这不仅能够优化存储空间&#xff0c;还能提升文件的传输和打开速度。PDF文件以其稳定性和跨平台兼容性成为工作和学习中的重要文件格式。然而&#xff0c;当我们需要通过邮件发送或上传大文件时&a…

时间序列对于LLM来说并没有什么不同

基础模型推动了计算语言学和计算机视觉领域的最新进展&#xff0c;并在人工智能领域取得了巨大成功。成功的基础模型的关键思想包括&#xff1a; 海量数据&#xff1a;庞大而多样的训练数据涵盖了广泛的分布&#xff0c;使模型能够近似任何潜在的测试分布。 可转移性&#xff…

Ubuntu网络连接图标消失了,没网!!!

文章目录 前言Step1&#xff1a;停止网络管理服务Step2&#xff1a;删除网络管理状态文件Step3&#xff1a;打开网络管理 前言 本次记录的事&#xff0c;有一天心血来潮想烧录一下开发板&#xff0c;却发现自己的Ubuntu系统的网络连接图标消失了&#xff0c;也没网了&#xff…

Docker中安装Kafka和Kafka UI管理界面

Kafka 简介 Apache Kafka 是一个分布式流处理平台,主要用于构建实时数据管道和流应用。它最初由LinkedIn开发,并于2011年开源,之后成为Apache项目的一部分。Kafka的核心概念和功能包括: 发布与订阅消息系统:Kafka允许用户发布和订阅消息流。高吞吐量:Kafka能够处理大量数…

ElasticSearch的应用场景和优势

ElasticSearch是一个开源的分布式搜索和分析引擎&#xff0c;它以其高性能、可扩展性和实时性在多个领域得到了广泛应用。以下是ElasticSearch的主要应用场景和优势&#xff1a; 应用场景 实时搜索&#xff1a; ElasticSearch以其快速、可扩展和实时的特性&#xff0c;成为实…

HarmonyOS应用开发者高级认证,Next版本发布后最新题库 - 单选题序号5

基础认证题库请移步&#xff1a;HarmonyOS应用开发者基础认证题库 注&#xff1a;有读者反馈&#xff0c;题库的代码块比较多&#xff0c;打开文章时会卡死。所以笔者将题库拆分&#xff0c;以20道题为一组&#xff0c;题库目录如下&#xff0c;读者可以按需跳转。如果对您的阅…

端口port

端口号用来识别计算机中进行通信的应用程序。因此&#xff0c;它也被称为程序地址。 一台计算机上同时可以运行多个程序。传输层协议正是利用这些端口号识别本机中正在进行通信的应用程序&#xff0c;并准确地进行数据传输。 总结&#xff1a; IP地址好比每个人的地址&#x…

MMC、EMMC、SD卡、TF卡、SDIO之间的关系

MMC MMC全称Multi-Media Card&#xff08;多媒体卡&#xff09;是一种小型可擦除的固态存储卡由西门子及闪迪于1997共同定制与发布的存储标准&#xff0c;‌主要应用于存储MP3、图像等多媒体文件&#xff0c;技术基于东芝的NAND FLASH技术&#xff0c;它是一种接口标准&#x…

volatile锁作用特点及其原理解析

目录 volatile概述 作用&#xff1a; 特点&#xff1a; 对比&#xff1a; 底层原理&#xff1a; volatile如何保证可见性的 volatile如何保证有序性 为什么volatile不保证原子性 volatile概述 volatile可以理解为轻量级的synchronized。但他与synchronized不同&#xf…

数据结构——单链表OJ题(上)

目录 一、移除链表元素 1.思路 2.注意 3.解题 二、反转链表 思路1&#xff1a;三指针翻转法 &#xff08;1&#xff09;注意 &#xff08;2&#xff09;解题 思路2&#xff1a;头插法 &#xff08;1&#xff09;注意 &#xff08;2&#xff09;解题 三、链表的中间结…

AWS 中国区同账号0etl integration配置步骤

中国区的AWS支持0etl integration已经一段时间了&#xff0c;目前北京区和宁夏区均支持。中文翻译为零ETL集成。 当前支持的引擎是Aurora MySQL数据托管式导出到Redshift. Global区域支持Aurora PostgreSQL. 中国区后续也会陆续出现此功能的。 功能介绍文档&#xff1a; 【1…

正则表达式的匹配模式有那些?

1、不区分大小写模式&#xff08;IgnoreCase&#xff09;&#xff1a; 在匹配文本字符串时&#xff0c;不区分文本字符串中的大小写。 在不同编程语言中&#xff0c;此模式的指定方式可能有所不同。例如&#xff0c;在Python中&#xff0c;可以使用常量re.I或re.IGNORECASE&a…