奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 > javascript >

es6的promise面试题,共六道由易到难

时间:2017-11-27 22:16来源:未知 作者:admin
Javascript 核心点 我们需要知道的是Promise在生命周期内有三种状态,分别是pending、fulfilled 或 rejected,状态改变只能是pending-gt;fulfilled(成功),或者pending-gt;rejected(失败)。而且状态一旦改变

Javascript

核心点

我们需要知道的是Promise在生命周期内有三种状态,分别是pending、fulfilled 或 rejected,状态改变只能是pending->fulfilled(成功),或者pending->rejected(失败)。而且状态一旦改变,就不能再次改变。

题目1

我们直接看看题目1的代码。

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
});

promise.then(() => {
    console.log(3);
});

console.log(4);

 

我们知道Promise的构造函数中代码是同步执行的,但是then方法是异步执行的,then方法需要等到等到resolve函数执行时才得到执行。

因此上述题目的答案是:1 2 4 3


题目2
 

const promise = new Promise((resolve, reject) => {
    resolve('success1');
    reject('error');
    resolve('success2');
});

promise
    .then((res) => {
        console.log('then: ', res);
    })
    .catch((err) => {
        console.log('catch: ', err);
    });

上述我们讲过Promise的状态一经改变后,就不会再次改变。

如上述题目代码所示,Promise一旦执行了resolve函数后,就不会再执行reject和其他的resolve函数了。一旦Promise执行了reject函数,将会被catch函数捕获,执行catch中的代码。

因此可以得出上述题目的结果为:

then: success1


题目3
 

Promise.resolve(1)
    .then((res) => {
        console.log(res);
        return 2;
    })
    .catch((err) => {
        return 3;
    })
    .then((res) => {
        console.log(res);
    });

 

题目中Promise首先resolve(1),接着就会执行then函数,因此会输出1,然后在函数中返回2。

因为是resolve函数,因此后面的catch函数不会执行,而是直接执行第二个then函数,因此会输出2。

因此题目3的结果是:1 2

 

题目4

题目4的代码如下所示。

 

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('once');
resolve('success');
}, 1000);
});
 
const start = Date.now();
promise.then((res) => {
console.log(res, Date.now() - start);
});
 
promise.then((res) => {
console.log(res, Date.now() - start);

});

 

 

题目4中首先定义了一个Promise,但是Promise中的代码是放在一个定时器中的,因此会先执行后面的代码。

利用Date.now()方法生成一个时间戳。

然后是在一秒后定时器内部的代码,首先输出一个'once',然后是执行resolve函数,执行完resolve函数后会执行then方法中的代码,因此会输出'success 1024'。

因为同一个promise只能改变一次状态,在多次调用then方法时会得到相同的上一次resolve的结果。

因此后面一个输出'success 1025'。

因此题目5的答案是。

once

success 1024

success 1025

 

题目5

题目5的代码如下所示。

 

const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000);
});
 
const promise2 = promise1.then(() => {
throw new Error('error!!!');
});
 
console.log('promise1', promise1);
console.log('promise2', promise2);
 
setTimeout(() => {
console.log('promise1', promise1);
console.log('promise2', promise2);

}, 2000);


接下来做分析。

上述代码中,分别生成了Promise1和Promise2,而且它们是两个Promise。

首先会打印出promise1,但是promise1中有个定时器,此时还并未执行resolve,因此会处于pending状态。

promise2是由promise1执行结束后再执行的,因为promise1还未执行完毕,因此promise2也处于pending状态。

等到定时器一秒后,promise执行了resolve('success'),promise状态变为fulfilled。此时执行promise2,但是在promise2内抛出一个Error,因此控制台会打印出Error的内容。

等到2秒钟后,第二个定时器触发,直接输出promise1,此时promise状态已经变为fulfilled,不会再更改,因此输出{'success'}。

promise2状态已经变为rejected,其内容就为Error: error!!!。

经上述分析后可以得出最终答案。



 

 

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-04-16 22:04

关注奔三路小程序,方便你我他