一道笔试题引发的Promise笔记

_Suqin 发布于2019-08-22 10:34 / 1046人阅读

摘要：对象是一个返回值的代理，这个返回值在对象创建时未必已知。这使得异步方法可以像同步方法那样返回值异步方法会返回一个包含了原返回值的对象来替代原返回值。

前言

近来参加校招笔试，发现有好几道关于Promise的题目。然而我都没有了解过。所以，这篇文章以网易笔试的一道题开始，记录关于Promise的那些事。
文章地址：http://lsxj615.com/2016/08/04...

笔试题

console.log(1);
new Promise(function (resolve, reject){
    reject(true);
    window.setTimeout(function (){
        resolve(false);
    }, 0);
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

请问输出结果是什么？在揭晓答案之前，我们还是先来了解一下Promise吧。

Promise是什么

Promise 对象用于异步(asynchronous)计算.。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。
Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise的API Constructor

使用new来调用Promise的构造器进行实例化

var promise = new Promise(function(resolve, reject){
    //异步处理
    //处理结束后，调用resolve或reject
});

Instance Method

对通过new生成的promise对象为了设置其在resolve(成功)/reject(失败)时调用的回调函数可以使用promise.then()实例方法

promise.then(onFulfilled, onRejected);
//以防误解，上述的即为以下这种形式
promise.then(function(){...}, function(){...});

当resolve(成功)时，会调用onFulfilled函数；
reject(失败)时，会调用onRejected函数。
这也对应了前面笔试题中,onFulfilled其实就是console.log(2)，也就是说成功时会调用console.log(2)，而失败时，onRejected就是调用console.log(3)。

若只想处理异常情况的函数，可promise.then(undefined, onRejected)，当然更好的选择是用promise.catch()来处理。二者效果相同。

promise.then(function (value) {
    console.log(value); 
}).catch(function (error) {
    console.log(error);
});

//等同于以下形式
promise.then(function (value) {
    console.log(value);
}, function (error) {
    console.log(error);
});

其他方法

Promise.all()

Promise.race()

Promise.resolve()

Promise.reject()

Promise的状态

Promise对象有三种状态

pending 初始状态，既不是fulfilled也不是rejected

fulfilled 成功。此时调用onFulfilled

rejected 失败。此时调用onRejected

Fulfilled和Rejected都可以表示为Settled。
由下图可以了解，最初Promise为pending状态，在执行后转为settled状态，而settled状态分为两种：在成功后转为fulfilled，执行.then(onFulfilled)方法；在失败后转为reject，执行.then(onRejecttion)或.catch(onRejecttion)，进行异步操作，再返回Promise对象，转为pending状态。

Promise.resolve & Promise.reject

Promise.resolve

Promise.resolve(value)可认为是new Promise()方法的快捷方式

Promise.value(value);

//等同于以下代码

new Promise(function(resolve){
    resolve(value);
});

此时这个promise对象会进入fulfilled状态。而resolve(value)中的value会传递给后面then中指定的onFulfilled函数。

Promise.resolve(value)返回值也是一个promise对象，所以可以进行链式调用.

Promise.reject

Promise.reject(error)与上述静态方法类似，也是new Promise()方法的快捷方式

Promise.reject(new Error("出错了"));
//等同于以下代码
new Promise(function(resolve, reject){
    reject(new Error("出错了"));
});

这段代码则是调用该promise对象通过then指定的onRejected函数，并将错误对象(Error)传递给onRejected函数。

笔试题解答

话不多说，贴图就是。

可以知道，当promise调用了reject(true)方法，则传递true这个参数给"then"指定的onRejected函数，即题目中的function(){console.log(3);}。但由于.then中指定的方法调用是异步执行的，所以会先执行console.log(4);

本篇文章仅是简单介绍promise。欲了解更多内容，可查看以下资料。谢谢~

资料来源：

Promise- Javascipt | MDN

JavaScript Promise迷你书（中文版)

云服务器 GPU云服务器笔试题前端笔试题大数据笔试题 java 笔试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90867.html

一道setTimeout async promise执行顺序的笔试题引发的思考

摘要：如果你要问他和谁当进去的快，要从下面两个方面考虑结束时。至于什么，查了很多的资料，了解到一个浏览器环境只能有一个事件循环，而一个事件循环可以有多个任务队列。 ====据说这是今日头条去年的一道笔试题，主要考察的是setTimeout async promise执行顺序～先双手奉上这道题目～ async function async1() { consol...

soasme 2019-08-23 13:53 评论0 收藏0
一道笔试题引发的思考

摘要：前两天做了一份笔试题按照执行顺序列出下面代码的打印内容可能有些小朋友会被里面那个立即执行函数吓傻。和将指向改变至，也就是了。前两天做了一份笔试题：按照执行顺序列出下面代码的打印内容 var name = The Window; var object = { name : The Object, getNameFunc : function(){ (()...

soasme 2019-08-20 18:24 评论0 收藏0
一道2016年nice的校招笔试题引发的思考

摘要：注意点这个代码是严格依赖环境的，例如中和是连续的，在编译器中，和之间有一个空间。注意点当把与交换之后，程序将不会出现死循环，但是程序的越界访问报错是少不了的。注意点这种优化是无差别的，即无论你的代码是否越界，都会进行这样的优化。目录声明原题题目详细解析运行结果：题目...

shixinzhang 2021-11-24 09:39 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

suemi 2019-08-22 16:05 评论0 收藏0