最近重温了一下 Q/Promise[1] 的设计讲解,结合自己的理解和一些小优化,决定也来写一篇手写 Promise 的文章。本文的内容适合对 Promise 的使用有一定了解的童鞋,因为过程中不会过多解释 Promise 的基础操作。我们从一个基础版本开始,渐进式地完成这个 Promise,在过程中分享我的理解和观点。内容可能有点长,废话不多说,我们开始吧。
Promise大家一定都不陌生了,JavaScript异步流程从最初的Callback,到Promise,到Generator,再到目前使用最多的Async/Await(如果对于这些不熟悉的可以参考我另一篇文章《JavaScript异步编程》),这不仅仅是技术实现的发展,更是思想上对于如何控制异步的递进。Promise作为后续方案的基础,是重中之重,也是面试时候最常被问到的。
在前端的日常工作中,回调函数(callback)应该是见怪不怪了,但是当回调函数遇上了异步(async),这就令人发指了。那么异步是什么意思呢,简单地说就是不等你执行完,就先执行下方的代码了。
Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。
我们都知道,JS是单线程的,只有前一个任务结束,才能执行下一个任务。显然在浏览器上,这样执行会堵塞浏览器对DOM的渲染。所以,JS中会有很多异步操作,那JS是如何实现异步操作呢?这就要想到「Promise对象」了,文本先来认识Promise,再手写代码实现Promise。
解释:promise 有 3 种状态:pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected,状态一旦改变则不能再变。上面 promise2 并不是 promise1,而是返回的一个新的 Promise 实例。
这道面试题是无意间在微信群里看到的,据说是某厂的面试题。一般关于 Promise 的面试题无非是考察宏微任务、EventLoop 之类的,当我认真去分析这道题的时候,越看越不对劲,感觉有诈!这是要考察啥?
大家都遵守同样的模块化规范写代码,降低了沟通程表,极大方便了各个模块之间的相互调用,利人利己。
必须在 package.json 的根节点中添加 "type": "module" 节点
由于昨天发了一篇关于setTimeout 的文章,里面提到了 Promise ,那篇文章里没有解释Promise的用法和含义,因为昨天的我还没太懂Promise,所以没有在那篇文章继续解释Promise,然后今天的我总算是对Promise有所理解了,然后我来谈谈我学到的Promise的知识,因为是个人的理解,所以会不全面,请多包涵。
① 同步 当用户使用js和浏览器发生交互时,执行到某一个模块时系统发现需要向服务器提供网络请求,这个时候,js操作就会被阻塞,然后浏览器向服务器发送网络请求。 我们都知道网络请求的速度会比较慢,在此期间,不管用户执行任何操作,浏览器都不会去执行,因为此时的浏览器正在向服务器发送请求,没有空去理会别的操作,这就是同步,简单可以理解成浏览器的执行是按照某中顺序执行的,只有等上一步完成之后才会继续执行下一步操作。 ② 异步 异步的含义和同步恰恰相反。当用户和浏览器发生交互,执行到某一模块的时候发现需要向服务器发送网络请求时,这个时候,浏览器向服务器发送请求之后,仍然可以执行别的操作。 当浏览器向服务器发送的请求得到回应后,我们一般会声明一个函数,将请求的结果放到该函数中,用户执行完某些操作后再回调该函数就可以得到向服务器发送网络请求的数据。 这就是异步,简单的可以理解成一心二用:**一边向服务器发送请求,一边执行相关的操作,最后通过回调某个函数来得到向服务器发动请求的数据。**如果只是一个简单的网络请求,这种方案没有什么麻烦,但是当网络请求变得复杂的时候,就会出现回调地狱 。
::: tip ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
通常情况下,通过对构造函数使用 new 会返回一个绑定到 this上的新实例,所以我们可以在 new 出来的对象上直接用 . 访问其属性和方法。如果在普通函数中也返回当前实例,那么我们就可以使用 . 在单行代码中一次性连续调用多个方法,就好像它们被链接在一起一样,这就是链式调用,又称链模式。
前端爱好者的知识盛宴 前言 前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解,可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的(不想看英文版的移步Promise/A+规范中文翻译) 引子 为了让大家更容易理解,我们从一个场景开始讲解,让大家一步一步跟着思路思考,相信你一定会更容易看懂。 考虑下面一种获取用户id的请
我们都知道 JavaScript 的代码执行的时候是跑在单线程上的,可以理解为只能按照代码的出现顺序,从上到下一行一行的执行,但是遇到了异步的行为,比如定时器(一定时间之后才去执行),那就需要等同步代码执行完成后的一段时间里再去执行异步代码。
很多同学在学习 Promise 时,知其然却不知其所以然,对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise,并结合流程图、实例以及动画进行演示,达到深刻理解 Promise 用法的目的。
程序的执行有几种套路:顺序执行、判断执行和循环执行。我认为的程序其实就是一个个或好或差的单元组成的大单元,计算机对这个大单元进行执行计算的过程。既然这个计算有过程,那肯定就有时间消耗。写的差的程序执行时间就长,写的好的程序执行时间就短。
尽管工作中用了无数次Promise async await,但是在写下这篇文章之前,却不知道Promise背后发生了些什么,我一直以为的逻辑是先等待Promise构造方法中的异步函数完成后,再调用then方法执行其中的函数。然而事情并没有这么简单,这篇文章将以深入浅出的方式理解Promise背后究竟发生了什么
前言 const p = new Promise((resolve, reject) => { console.log('A') setTimeout(() => { console.log('B') resolve('C') }) }) p.then(res => { console.log(res) }) // A B C D 尽管工作中用了无数次Promise async await,但是在写下这篇文章之前,却不知道Promise背后发生了些什么,我一直以为的逻辑是
在JavaScript中,一些操作是异步的。这意味着当这些操作完成时,它们产出的结果或者值并不会立即生效。
在面试的时候,经常会有面试官让你实现一个Promise,如果参照A+规范来实现的话,可能面到天黑都结束不了。
箭头函数是把函数简写成一个表达式;如果只有一个参数,()可以省略;如果只有一个行,{ }可以省略,return 可以省略。
其实最近在不断的更新Java的知识,从基础到进阶,以及计算机基础、网络、WEB、数据库、数据结构、Linux、分布式等等内容,预期写成一个既可以学习提升又可以面试找工作的《Java成长之路》!算是对自己学习的总结(笔记),也算是一种程序猿的记忆,现在大环境那么差,万一哪天转行了,还能当做一种记忆。
Promise 最早出现在 1988 年,由 Barbara Liskov、Liuba Shrira 首创(论文:Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems)。并且在语言 MultiLisp 和 Concurrent Prolog 中已经有了类似的实现。
1.最常见的块单位是函数。从现在到将来的“等待”,最简单的方法(但绝不是唯一的,甚至也不是最好的)是使用一个通常称为回调函数的函数
1. 同步API,异步API //路径拼接 const public = path.join(_ dirname, 'public') ; //通过返回值拿到 //请求地址解析 const url0bj = url. parse (req. ur1) ; //通过返回值拿到 //读取文件 fs. readFile(' ./demo.txt', 'utf8', (err, result) => { console .1og (result) ; }) ; //通过函数方式拿到 同步API:只有当前
也可以使用async 和 await,将异步代码同步的写出,去掉了.then的链式调用
Javascript异步编程先后经历了四个阶段,分别是Callback阶段,Promise阶段,Generator阶段和Async/Await阶段。Callback很快就被发现存在回调地狱和控制权问题,Promise就是在这个时间出现,用以解决这些问题,Promise并非一个新事务,而是按照一个规范实现的类,这个规范有很多,如 Promise/A,Promise/B,Promise/D以及 Promise/A 的升级版 Promise/A+,最终 ES6 中采用了 Promise/A+ 规范。后来出现的Generator函数以及Async函数也是以Promise为基础的进一步封装,可见Promise在异步编程中的重要性。
很容易可以看出,上述代码会依次输出1,2。因为代码是从上到下,依次执行,执行完f1(),才会执行f2()。但是如果f1()中的代码执行的是读取文件或者ajax操作呢,文件的读取都需要一定时间,难道我们需要完全等到文件完全读完再进行写操作么?为了解决这个问题,接下来我们来探究一下js中 同步和异步 的概念。
这是一个系列文章,你可以关注公众号「五月君」订阅话题《JavaScript 异步编程指南》获取最新信息。
这里说的Promise是es6 harmony的Promise, 而非那个DOM Promise. 现在的Chrome两种Promise都支持, 但默认为DOM的Promise, 要想打开harmony模式, 还得要在chrome://flag中打开harmony (启用实验性 JavaScript) 分辨dom promise和harmony promise的方法就是在dev中输入Promise(function(){}) 如果报错了说明是dom的promise, 不报错则为harmony的promise
我们说处理javascript异步最常用的方式就是通过回调函数,对于回调函数我们昨天对此做了介绍 简单快速, 我们一般使用嵌套回调或者链式回调,会产生以下问题
我们希望能对请求的发送和响应做拦截,也就是在发送请求之前和接收到响应之后做一些额外逻辑。
本文介绍了Web性能优化的十种武器,包括文件合并、图片懒加载、CSS抽取、JS缓存、图片缓存、使用CDN、使用缓存、懒加载、预加载、按需加载和代码拆分。这些技术可以提高网站的性能,提高用户体验,从而增加用户的留存率和活跃度。
起初本瓜看到【单子】说白了不过就是【自函子范畴】上的一个【幺半群】而已?这句话的时候,还以为自己在看量子力学的量子纠缠相关内容,单子、函子、粒子、玻色子、费米子、绝绝子。。。
链式编程: 将多个操作(多行代码)通过点号(.)链接在一起成为一句代码,使代码可读性好a(1).b(2).c(3)。
笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的一切。阅读完本文,读者应该能够了解:
当我们开发JavaScript应用时候,我们经常要处理依赖于其他任务的任务!比方说,我们想要先获取一个图像,然后经过压缩,应用过滤器,最后保存它。
在JS 代码中,异步无处不在,Ajax通信,Node中的文件读写等等等,只有搞清楚异步编程的原理和概念,才能在JS的世界中任意驰骋,随便撒欢;
首先介绍一下高阶函数,即一个函数的参数是函数或者函数返回值为函数,此函数称做高阶函数。
页面上有两个button,以上js代码为button添加click事件。会输出什么样的结果呢?
ES6 promise 是非常棒的一个功能, 它是 JavaScript 异步编程中不可或缺的部分,并且取代了以 回调地狱而闻名的基于回调的模式。
作为一个前端, 还有人说不会用 Promise,真的就有点过分了. 为了跟上卷的潮流,我们今天就用typeScript 来实现一下 Promise 的实现. *写 promise 之前我们需要明确一些常识.
任何东西不可能凭空出来。那么Promise,它到底是个啥?干嘛用的?为解决什么问题而出现的?咱们以这几个问题为线索,简单的说一下。为什么说是简单说一下呢?因为要详细的说那还不如直接看文档呢。 Promise是一个方案,用来解决多层回调嵌套的解决方案。它现在是ES6的原生对象。 可以把一个多层嵌套的同步、异步都有回调的方法,给拉直为一串.then()组成的调用链。 多层嵌套的回调方法中,如果同时存在同步、异步的方法,那
函数管道和组合是函数式编程中的概念,当然也可以在JavaScript中实现--因为它是一种多范式的编程语言,让我们快速深入了解这个概念。
前言 函数作为一等对象,使得javascript这种弱类型,单线程脚本语言的异步方法极为方便,只需要一个callback,编译器就能按照我们的想法执行命令。如果只有一个简单的异步操作,我们可以稍费脑子理清执行顺序,但是如果有多个异步方法,呃,我们就可能掉进了回调陷阱,事情远远没有我们想到的那么简单,并且我们甚至还没考虑过异步中抛出的错误。 还好Promise的出现,解救了我们,这篇文章不是讲解Promise的详细使用方法,只是通过两个例子,看看Promise的优雅之处,详细资料请参考阮一峰老师 《ES6标准
领取专属 10元无门槛券
手把手带您无忧上云