javaScript 进阶之路 --- 《手写“回调地狱”》(二)

简介: javaScript 进阶之路 --- 《手写“回调地狱”》

现在我们知道,这个改造的 addUserAge1 函数会返回一个 Promise 实例。

image.png

我们先看一下这个实例身上到底是什么样子的。

image.png

我们这里我们关键先看这两个属性,我们的结果好像被保存到了一个叫 [[PromiseResult]] 的属性中。还有一个属性叫做 [[PromiseSate]]

三. Promise 的三个状态


1.这里我们先说明, [[PromiseSate]] 有三种状态 pendding,fulfilledrejected。分别对应着数“据存放之前”,“数据存放成功”,“和数据存放失败”三种情况。

“数据存放之前”是指你还没通过 resolve 或者 reject 去存放数据的时候。

image.png

image.png

“数据存放成功”就是上面我们刚刚调用 resolve 的结果,这里不再重复。

“和数据存放失败”就是我们调用 reject 函数保存的数据。

image.png

image.png

那既然我已经看到了放在 [[PromiseResult]] 的结果,我该怎么去取呢?非常简单。

image.png

Promise 实例身上为我们提供了一个 then 方法。并且会把 [[PromiseResult]] 存放的值,传递给 then 方法的第一个回调函数的参数里。

image.png

我们看一下结果:

image.png

如果读过我之前文章的小伙伴,这种写法不知道你还熟悉吗?

image.png

如果这个能看懂,我相信你读懂后面的 《手写Promise》 一定没问题!!🎁

如果是 reject 保存的数据,那么他会被传递给 then 方法的第二个回调函数的参数中。

image.png

ok,我们休息一下,不再讲 cath 等这些方法了,让我们慢慢消化一下。

四. 回到最初的问题


现在我们大致了解了 Promise 的基本原理。我们之前说过,“回调地狱” 的产生是因为我需要多次请求后端的数据,多次嵌套调用了回调函数,才产生了 金字塔 一样的代码结构。那我们的 Promise 是怎么就避免了这个呢?

下面的内容我们先忽略 reject ,我们只要搞懂 resolvereject 我相信你会同样会马上理清楚。

image.png

现在还是老问题,我下面的页面需要依靠 age1 继续 +1 才能得到正确的样式,我们先来看结论。

image.png

看一下结果:

27b694d9934445febdeae668f3e61783_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

你发现了什么吗?

image.png

  1. 我在这里 return 了另一个 Promise 实例,然后我就可以接着 then 下去。

这里直接引出:then 方法的返回值会被当重新包装成 Promise 实例,完成“链式调用”

  1. 聪明的你就可以猜到,我们接下来如果多次 age+1 的话。我就一直重复 then--> return --> then --> return 就行了。

image.png

1dc5617015db47f0aa9b2f8f2e0bf846_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.JPG

  1. 可以看出上面的代码写法,并没有出现一直向右倾斜的情况,要比之前代码的可读性强非常多的。这其实就是 Promise 帮我们完成的事情。

结语:

其实 Promise 相关还有非常多的知识,如 catch,finally等这些, 我单独一章讲完等话,害怕有的读者会消化不了。所以就把核心的概念先抛出来,如果你顺利的读懂里本文,那剩下没讲到的那些方法,我希望你可以自行去了解,我只能做一个引路人把核心概念给你捋清楚,打渔还需你自己。

如果有的小伙伴感觉没太读懂,我还是希望你能回过头把这两篇文章读熟,读透,再返过来读本篇文章。

如果你跟进了后续的《手写 Promise》,我相信你会看到一个不一样的 JS 世界。🎁~

相关文章
|
15天前
|
前端开发 JavaScript 数据库连接
掌握 JavaScript 异步编程:从回调到 Async/Await
在现代 JavaScript 开发中,异步编程是处理非阻塞操作的关键技术。本文从早期的回调函数讲起,逐步过渡到 Promise 和 ES2017 的 async/await 语法,展示了异步编程如何变得更加简洁和强大。通过实用的技巧和最佳实践,帮助开发者避免常见陷阱,提升代码效率和可靠性。
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
104 24
|
3月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
51 1
|
3月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
41 2
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
76 2
|
3月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
48 0
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
78 0
|
3月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
110 0
|
3月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
73 0
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。
50 0