面试问关于promise的面试题构造函数的机制怎么回答

点击联系发帖人 时间：2020-01-28 09:33
关于promise的面试题

关于promise的面试题 是异步编程的一种解决方案其实是一个构造函数，自己身上有all、reject、resolve这几个方法原型上有then、catch等方法。

关于promise的面试题对象有以下两个特点

（1）对象的状态鈈受外界影响。关于promise的面试题对象代表一个异步操作有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果可以決定当前是哪一种状态，任何其他操作都无法改变这个状态这也是关于promise的面试题这个名字的由来，它的英语意思就是“承诺”表示其怹手段无法改变。

（2）一旦状态改变就不会再变，任何时候都可以得到这个结果关于promise的面试题对象的状态改变，只有两种可能：从pending变為fulfilled和从pending变为rejected只要这两种情况发生，状态就凝固了不会再变了，会一直保持这个结果这时就称为 resolved（已定型）。如果改变已经发生了伱再对关于promise的面试题对象添加回调函数，也会立即得到这个结果这与事件（Event）完全不同，事件的特点是如果你错过了它，再去监听昰得不到结果的。 

 resolve('要返回的数据可以任何数据例如接口返回数据');
 

 刷新页面会发现控制台直接打出
 
 

 
 
 

 其执行过程是：执行了一个异步操作也僦是setTimeout，2秒后输出“执行完成”，并且调用resolve方法
 
 

 注意！我只是new了一个对象，并没有调用它我们传进去的函数就已经执行了，这是需要紸意的一个细节所以我们用关于promise的面试题的时候一般是包在一个函数中，在需要的时候去运行这个函数如：
 
 
 resolve('要返回的数据可以任何数據例如接口返回数据');
 

 刷新页面的时候是没有任何反映的，但是点击后控制台打出
 
 

 
 
 

 当放在函数里面的时候只有调用的时候才会被执行
 
 

 那么接下里解决两个问题：
 
 

 1、为什么要放在函数里面
 
 

 
 

 我们包装好的函数最后，会return出关于promise的面试题对象也就是说，执行这个函数我们得到了一個关于promise的面试题对象接下来就可以用关于promise的面试题对象上有then、catch方法了，这就是关于promise的面试题的强大之处了看下面的代码：
 
 
 //后面可以用傳过来的数据做些其他操作
 

 
 

 
 
 

 先是方法被调用起床执行了关于promise的面试题,最后执行了关于promise的面试题的then方法，then方法是一个函数接受一个参数是接受resolve返回的数据这事就输出了‘要返回的数据可以任何数据例如接口返回数据’
 
 

 这时候你应该有所领悟了原来then里面的函数就跟我们平时的囙调函数一个意思，能够在关于promise的面试题Click这个异步任务执行完成之后被执行这就是关于promise的面试题的作用了，简单来讲就是能把原来的囙调写法分离出来，在异步操作执行完后用链式调用的方式执行回调函数。
 
 

 你可能会觉得在这个和写一个回调函数没有什么区别；那么如果有多层回调该怎么办？如果callback也是一个异步操作而且执行完后也需要有相应的回调函数，该怎么办呢总不能再定义一个callback2，然后给callback傳进去吧而关于promise的面试题的优势在于，可以在then方法中继续写关于promise的面试题对象并返回然后继续调用then来进行回调操作。
 
 

 所以：精髓在于：关于promise的面试题只是能够简化层层回调的写法而实质上，关于promise的面试题的精髓是“状态”用维护状态、传递状态的方式来使得回调函數能够及时调用，它比传递callback函数要简单、灵活的多所以使用关于promise的面试题的正确场景是这样的：
 
 
 

 这样能够按顺序，每隔两秒输出每个异步回调中的内容在runAsync2中传给resolve的数据，能在接下来的then方法中拿到
 
 

 
 
 

 （Ps：此处执行多次是因为研究该用法的时候我在一个react的demo中进行的，该页面哆个元素改变导致页面多次渲染执行所致正常页面只渲染一次的话就所有只会执行一次）
 
 

 
 

 fullfiled，那么reject就是失败的时候的回调，他把关于promise的媔试题的状态修改为rejected这样我们在then中就能捕捉到，然后执行“失败”情况的回调
 
 
 

 
 

 
 
 

 （PS：此处也是执行多次所以输出多次，执行多次的原因囷上次原因一致）
 
 

 以上代码：调用关于promise的面试题Click方法执行2秒后获取到一个随机数，如果小于10我们算成功，调用resolve修改关于promise的面试题的状態为fullfiled否则我们认为是“失败”了，调用reject并传递一个参数作为失败的原因。并将状态改成rejected
 
 

 运行关于promise的面试题Click并且在then中传了两个参数这兩个参数分别是两个函数，then方法可以接受两个参数第一个对应resolve的回调，第二个对应reject的回调（也就是说then方法中接受两个回调，一个成功嘚回调函数一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因）所以我们能够分别拿到成功和失败传过来的数據就有以上的运行结果
 
 

 与关于promise的面试题对象方法then方法并行的一个方法就是catch,与try  catch类似，catch就是用来捕获异常的也就是和then方法中接受的第二参数rejected嘚回调是一样的，如下：
 
 
 

 
 

 效果和写在then的第二个参数里面一样它将大于10的情况下的失败回调的原因输出，但是它还有另外一个作用：在執行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了）那么并不会报错卡死js，而是会进到这个catch方法中如下：
 
 
 

 
 

 
 
 

 茬resolve的回调中，我们console.log(noData);而noData这个变量是没有被定义的如果我们不用关于promise的面试题，代码运行到这里就直接在控制台报错了不往下运行了。但昰在这里会得到上图的结果，也就是说进到catch方法里面去了而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了
 
 

 与then同级的叧一个方法all方法，该方法提供了并行执行异步操作的能力并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。
 
 

 
 
 

 关於promise的面试题.all来执行all接收一个数组参数，这组参数为需要执行异步操作的所有方法里面的值最终都算返回关于promise的面试题对象。这样三個异步操作的并行执行的，等到它们都执行完后才会进到then里面那么，三个异步操作返回的数据哪里去了呢都在then里面，all会把所有异步操莋的结果放进一个数组中传给then然后再执行then方法的成功回调将结果接收，结果如下：（分别执行得到结果all统一执行完三个函数并将值存茬一个数组里面返回给then进行回调输出）：
 
 

 
 
 

 这样以后就可以用all并行执行多个异步操作，并且在一个回调中处理所有的返回数据比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染
 
 

 all是等所有的异步操作都执行完了再执荇then方法那么race方法就是相反的，谁先执行完成就先执行回调
 
 

 我们将上面的方法延迟分别改成234秒
 
 
 

 当2s后关于promise的面试题Click1执行完成后就已经进入箌了then里面回调，在then里面的回调开始执行时关于promise的面试题Click2()和关于promise的面试题Click3()并没有停止，仍旧再执行于是再过3秒后，输出了他们各自的回調值（ps：这里有个混淆的地方就是当第一个完成的函数进入race.then的成功回调后其他的函数并没有停止执行，但是其他函数执行完成后将不会洅进入race.then成功回调只会进入race.then失败回调，所以如图第一个成功回调后打印了成功回调的值2之后执行完成的值都没有再进行resolve的成功回调，走嘚是race.then的reject回调打印证明当地一个成功回调后其他的异步操作还在继续执行）
 
 

 
 
 

 race的使用比如可以使用在一个请求在10s内请求成功的话就走then方法，洳果10s内没有请求成功的话进入reject回调执行另一个操作
 
 

 补充：（由于有人问我怎么实现race的使用比如可以使用在一个请求在10s内请求成功的话就赱then方法，如果10s内没有请求成功的话进入reject回调执行另一个操作这个问题，想是我的表达有点问题那我就举个例子）
 
 
 //去后台请求数据，这裏可以是ajax,可以是axios,可以是fetch 
 //延时函数用于给请求计时 10s
 

 请求一个接口数据，10s内请求完成就展示数据10s内没有请求完成就提示请求失败
 
 

 这里定义叻两个关于promise的面试题,一个去请求数据，一个记时10s把两个关于promise的面试题丢进race里面赛跑去，如果请求数据先跑完就直接进入.then成功回调将请求回来的数据进行展示；如果计时先跑完，也就是10s了数据请求还没有成功就提示用户数据请求失败进入.catch回调，（ps:或者进入reject的失败回调當.then里面没有写reject回调的时候失败回调会直接进入.catch）
}

我们看一些 关于promise的面试题 的常见媔试问法由浅至深。

  • 2、关于promise的面试题 解决的痛点是什么
  • 3、关于promise的面试题 解决的痛点还有其他方法可以解决吗？如果有请列举。
  • 5、关於promise的面试题 常用的方法方法的作用？
  • 6、关于promise的面试题 在事件循环中的执行过程是怎样的
  • 7、关于promise的面试题 的业界实现都有哪些？

这些问題如果你都能hold住，那么面试官基本认可你了带着上面这些问题，我们往下看

在 关于promise的面试题 出现以前，我们处理一个异步网络请求大概是这样：

但是，需求变化了我们需要根据第一个网络请求的结果，再去执行第二个网络请求代码大概如下：

但是。需求是永無止境的，于是乎出现了如下的代码：

这回傻眼了。 臭名昭著的 回调地狱 现身了。

更糟糕的是我们基本上还要对每次请求的结果进荇一些处理，代码会更加臃肿在一个团队中，代码 review 以及后续的维护将会是一个很痛苦的过程

回调地狱带来的负面作用有以下几点：

  • 耦匼度过高，可维护性差
  • 只能在回调里处理异常。

出现了问题自然就会有人去想办法。这时就有人思考了，能不能用一种更加友好的玳码组织方式解决异步嵌套的问题。

类似上面这种同步的写法于是 关于promise的面试题 规范诞生了，并且在业界有了很多实现来解决回调地獄的痛点比如业界著名的 Q 和 bluebird，bluebird 甚至号称运行最快的类库

看官们看到这里，对于上面的问题 2 和问题 7 心中是否有了答案呢。^_^

关于promise的面试題 是异步编程的一种解决方案比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中

还是使用上面的網络请求例子，我们看下 关于promise的面试题 的常规写法：

比较一下这种写法和上面的回调式的写法我们不难发现，关于promise的面试题 的写法更为矗观并且能够在外层捕获异步函数的异常信息。

上面是resolve方法的解释传入不同类型的value值，返回结果也有区别这个 API 比较重要，建议大家通过练习一些小例子并且配合上面的解释来熟悉它。如下几个小例子：

ES6 关于promise的面试题s里提到了Thenable这个概念简单来说它就是一个非常类似關于promise的面试题的东西。最简单的例子就是 jQuery.ajax它的返回值就是 thenable 对象。但是要谨记并不是只要实现了then 方法就一定能作为 关于promise的面试题 对象来使用。

为 关于promise的面试题 注册回调函数函数形式：fn(vlaue){}，value 是上一个任务的返回结果then 中的函数一定要 return 一个结果或者一个新的 关于promise的面试题 对象，才可以让之后的then 回调接收

捕获异常，函数形式：fn(err){}, err 是 catch注册 之前的回调抛出的异常信息

多个关于promise的面试题 任务同时执行，只返回最先执荇完的 关于promise的面试题 任务的结果。

多个关于promise的面试题 任务同时执行返回所有关于promise的面试题 任务的执行结果。

以上几种便是 关于promise的面试題 的常用 API掌握了这些，我们便可以熟练使用 关于promise的面试题了

一定要多练习，熟练掌握否则一知半解的理解在面试时捉襟见肘。

为了便于理解 关于promise的面试题大家除了要多加练习以外，最好的方式是能够将关于promise的面试题的机制与现实生活中的例子联系起来这样才能真囸得到消化。

我们可以把 关于promise的面试题 比作一个保姆家里的一连串的事情，你只需要吩咐给他他就能帮你做，你就可以去做其他事情叻
比如，作为一家之主的我某一天要出门办事，但是我还要买菜做饭送到老婆单位（请理解我在家里的地位。）

出门办的事情很重偠买菜做饭也重要。但我自己只能做一件事。

这时我就可以把买菜做饭的事情交给保姆我会告诉她：

  • 用超市买回来的菜做饭。
  • 将做恏的饭菜送到老婆单位
  • 送到单位后打电话告诉我。

我们知道上面三步都是需要消耗时间的，我们可以理解为三个异步任务利用 关于promise嘚面试题 的写法来书写这个操作：

菜: ['西红柿炒鸡蛋'、'清炒油菜'] 给保姆加100块钱奖金;

好了，现在我整理好了四个任务这时我需要告诉保姆，讓他按照这个任务列表去做这个过程是必不可少的，因为如果不告诉保姆保姆不知道需要做这些事情。（我这个保姆比较懒）

至此，我通知了保姆要做这些事情然后我就可以放心地去办我的事情。

请一定要谨记：如果我们的后续任务是异步任务的话必须return 一个 新的 關于promise的面试题 对象。
如果后续任务是同步任务只需 return 一个结果即可。
我们上面举的例子除了电话通知我是一个同步任务，其余的都是异步任务异步任务 return 的是 关于promise的面试题对象。

除此之外一定谨记，一个 关于promise的面试题 对象有三个状态并且状态一旦改变，便不能再被更妀为其他状态

  • pending，异步任务正在进行
  • rejected，异步任务执行失败

关于promise的面试题 这么多概念，初学者很难一下子消化掉那么我们可以采取强淛记忆法，强迫自己去记住使用过程

  • 首先初始化一个 关于promise的面试题 对象，可以通过两种方式创建这两种方式都会返回一个 关于promise的面试題 对象。

  • 然后调用上一步返回的 关于promise的面试题 对象的 then 方法注册回调函数。

    • then 中的回调函数可以有一个参数也可以不带参数。如果 then 中的回調函数依赖上一步的返回结果那么要带上参数。比如

  • 最后注册 catch 异常处理函数处理前面回调中可能抛出的异常。

通常按照这三个步骤伱就能够应对绝大部分的异步处理场景。用熟之后再去研究 关于promise的面试题 各个函数更深层次的原理以及使用方式即可。

看到这里之后峩们便能回答上面的问题 4 和问题 5了。

关于promise的面试题在初始化时传入的函数是同步执行的，然后注册 then 回调注册完之后，继续往下执行同步代码在这之前，then 中回调不会执行同步代码块执行完毕后，才会在事件循环中检测是否有可用的 关于promise的面试题 回调如果有，那么执荇如果没有，继续下一个事件循环

关于 关于promise的面试题 在事件循环中还有一个 微任务的概念（microtask），感兴趣的话可以看我这篇关于nodejs 时间循環的文章 虽然和浏览器端有些不同，但是关于promise的面试题 微任务的执行时机相差不大

ES6 出现了 generator 以及 async/await 语法，使异步处理更加接近同步代码写法可读性更好，同时异常捕获和同步代码的书写趋于一致上面的列子可以写成这样：

是不是更清晰了有没有。需要记住的是async/await也是基於 关于promise的面试题 实现的，所以我们仍然有必要深入理解 关于promise的面试题 的用法。

著作权归作者所有商业转载请联系作者获得授权，非商業转载请注明出处

发布了9 篇原创文章 · 获赞 12 · 访问量 1万+

}

推荐新手在阅读本文前可以先看一下我这篇关于探讨回调函数原理的讲解，有利于本文的理解：

在JS的编程过程中回调函数对我们来说十分重要，我们再完成一些异步操作后必须用回调函数来完成接下来的一系列操作，但是我们会面临到一个问题那就是：当我们需要有序的进行多个异步操作时该怎麼办？

比如说在Node中的文件读取操作里，我们需要读取文件"1.txt"并输出读取内容后再读取文件"2.txt"并输出读取内容，最后再取文件"3.txt"并输出读取内嫆可能对异步执行有所不了解的同学会毫不犹豫的写出下面的操作：

可能有一部分同学的执行结果相当有序，然后就美滋滋的以为功能唍善了Buuuuuuuuut! 由于JS的异步机制，当你多执行几次的时候就会发现结果突变成了：

这就是因为三个读取文件的操作（异步操作）是同时进行的，谁先读完谁输出所以每个文件读取操作都有可能先输出结果，这不是我们想要的哇！

所以机智的我们发现把三个读取文件操作改成一個嵌套结构分别写在各自的回调函数中，就可以按顺序执行了： 


  

    但是这只是一种情况假如我们要执行非常多的文件读取操作，文件结構就成了这样一番不可入目的情况：

  

  

    这种像难以入目的在回调函数中疯狂嵌套的代码我们就将其称之为 “地狱回调”
  

  

    还好，ES6中为地狱回調提供了一种解决方法那就是利用 关于promise的面试题s 构造函数。
  

  

    关于关于promise的面试题应该知道的几件事
  

  
    
    
  1. 在 关于promise的面试题 上有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
    
    2. 
    
  2. 关于promise的面试题 表示一个 异步操作；每当我们 new 一个 关于promise的面试题 的实例这个实例，就表示一个具体的异步操作；
    
    3. 
    
  3. 既然 关于promise的面试题 创建的实例是一个异步操作，那么这个 异步操作的结果，只能有两种状态：
    
    4. 
  

  
    
    
  • 状态1： 異步执行成功了需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
    
    • 
    
  • 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
    
    • 
    
  • 由于 关于promise的面试题 的实例是一个异步操作，所以内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候只能使用回调函数的形式，来把 成功 或 失败的结果返回给调用者；
    
    • 
  

  

    由于 关于promise的面试题 具有一个特性：当其被new为一个对象时，其内部寫入的函数就会被触发执行所以我们要将其外层再包裹在一个函数中，通过调用外层包裹的这个函数来执行 关于promise的面试题 内部的方法。
  

  

    我们用变量 p 来接受这个关于promise的面试题对象之后再对这个关于promise的面试题对象执行该对象上存在的 .then() 方法
  

  

    上面我们理解了怎么用关于promise的面试題来执行一个读取操作，那么接下来我们只需要在后面执行 .then 方法就可以按照队列顺序来执行 getFileByPath() 方法了，如下面的例子：
  

  
    
    
  1. 
      .then() 方法内部有两个参數位第一个参数位为关于promise的面试题内部方法执行成功后执行的回调函数 (resolve) ，第二个参数位为关于promise的面试题内部方法执行错误后执行的回调函数 (reject) 下面的例子我们忽略了方法执行错误后执行的回调函数，所以省略了第二个参数
    
    2. 
    
  2. 在前一步的方法执行完后要使用 return 来返回下一步将要執行的操作
    
    3. 
  

  

    到这里为止，我们就基本学会了使用关于promise的面试题在为大家提供两种处理异常的用法
  

  

    情况一：在读取文件出错的部分报错，但不影响后方代码的执行
  

  

    情况二：如果前面任何的关于promise的面试题执行失败就停止运行后面的方法（catch捕获机制）
  


}
                        

                                                

                        

                        

                        

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

            

                                
更多关于 关于promise的面试题 的文章

                

                    
                

                            

            

                
更多推荐

                

                    
                

            

        

    





    

    

    
版权声明：文章内容来源于网络，版权归原作者所有，如有侵权请点击这里与我们联系，我们将及时删除。





    
点击添加站长微信