promise优化回调地狱
时间:2021-08-22
本文章向大家介绍promise优化回调地狱,主要包括promise优化回调地狱使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> const ID_BASE_URL = 'https://jsonplaceholder.typicode.com/todos' const ROBOT_IMG_BASE_URL = 'https://robohash.org' function getRobotId(num, callback) { $.get(`${ID_BASE_URL}/${num}`, (data) => { const id = data.id callback(id) }) } function createBobot(id) { const img = document.createElement('img') img.src = ROBOT_IMG_BASE_URL + `/${id}?size=200x200` document.body.appendChild(img) } function getRobotIdPromise(num) { const promise = new Promise((res, rej) => { $.get(`${ID_BASE_URL}/${num}`, (data) => { const id = data.id res(id) }) }) return promise } getRobotIdPromise(1) .then((id) => { createBobot(id) return getRobotIdPromise(2) }) .then((id) => { createBobot(id) return getRobotIdPromise(3) }) .then((id) => { createBobot(id) return getRobotIdPromise(4) }) .then((id) => { createBobot(id) return getRobotIdPromise(5) }) .then((id) => { createBobot(id) }) // 回调地狱 // getRobotId(1, (id) => { // createBobot(id) // getRobotId(2, (id) => { // createBobot(id) // getRobotId(3, (id) => { // createBobot(id) // getRobotId(4, (id) => { // createBobot(id) // getRobotId(5, (id) => { // createBobot(id) // }) // }) // }) // }) // }) </script>
原文地址:https://www.cnblogs.com/wuqilang/p/15172783.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 计时器 hook
- 自定义eslint 配置包
- 【61期】MySQL行锁和表锁的含义及区别(MySQL面试第四弹)
- 关于死锁你了解多少,通过“让APP随手机壳改变颜色,程序员和产品经理大家”这一事,了解下死锁可好?
- 三阴性乳腺癌表达矩阵探索笔记之GSEA
- 关于Python异常处理,你需要了解的知识点
- 三阴性乳腺癌表达数据探索笔记之GSVA分析
- 无敌解决GitHub无法ping通也无法登录的问题无敌解决idea连接GitHub提示Invalid authentication data. Connection reset
- 文献笔记七十一:REDO根据vcf文件检测植物细胞器基因组RNA编辑位点
- 如如何基于Docker快速搭建Elasticsearch集群?
- 解决Centos8无法安装docker的问题
- 正则表达式
- Python函数详解一(函数参数、变量作用域)
- Java9改进try-with-resources语法
- 如何用Python实现网页转PDF