ES6中, Promise/then的用法, 躲坑秘籍

知识点

  1. Promise.then()的返回值是一个新的Promise
  2. Promise.then()需要2个参数(均可选), 第1个参数用于处理resolve, 第2个参数用于处理reject
  3. 无论resolve*被处理*还是reject*被处理*, Promise.then()都会*默认*返回一个新的Promise实例, 且该Promise实例是*resolved*状态的; 当然了, 这种默认的行为是可以改变的, 如果用户在处理resolvereject的时候, 显式返回一个Promise实例, 那么Promise.then()将返回用户显式创建的Promise实例
  4. 如果Promise.then()*应该处理*resolve/reject*未处理*, 那么, Promise.then()返回的新的Promise实例的状态与前面的Promise实例的状态相同

实验代码

1. Promise.then() / Promise.catch()

let p1, p2, p3, p4;

p1 = Promise.reject('[00]');
p2 = p1.then(null, null);// 不处理resolve, 也不处理reject
setTimeout(console.log, 1 * 1000, p1, p2);
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"}
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"} //结果为前一个Promise实例(p1)的状态: rejected

p1 = Promise.resolve('[00]');
p2 = p1.then(null, null);// 不处理resolve, 也不处理reject
setTimeout(console.log, 1 * 1000, p1, p2);
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "[00]"}
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "[00]"} //结果为前一个Promise实例(p1)的状态: resolved

p1 = Promise.reject('[00]');
p2 = p1.then((rslt)=>{console.log('rslt1', rslt); return '[1]'; }, null);// 不处理reject
setTimeout(console.log, 1 * 1000, p1, p2);
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"}
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"} //结果为前一个Promise实例(p1)的状态: rejected

p1 = Promise.reject('[00]');
p2 = p1.then(null, (err)=>{console.log('err1', err); return '[11]'; });// 处理reject
setTimeout(console.log, 1 * 1000, p1, p2);
// err1 [00]
//
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"}
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "[11]"} //结果变为resolved

p1 = Promise.reject('[00]');
p2 = p1.then(null, (err)=>{console.log('err1', err); return Promise.reject('[11]'); });// 显式返回rejected promise
setTimeout(console.log, 1 * 1000, p1, p2);
// err1 [00]
//
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[00]"}
// Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: "[11]"} //结果变显示返回的Promise实例: rejected

2. Promise.all()

// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (values) {
    console.log(Date.now() - startDate + 'ms');
    // 約128ms
    console.log(values);    // [1,32,64,128]
});

也就是说,这个promise对象数组中所有promise都变为resolve状态的话,至少需要128ms。实际我们计算一下Promise.all 的执行时间的话,它确实是消耗了128ms的时间。
从上述结果可以看出,传递给 Promise.all 的promise并不是一个个的顺序执行的,而是同时开始、并行执行的。

3. 在一个事件循环(event loop)中执行全部符合条件的Promise.then()

setTimeout(()=>{console.log('timeout 0');}, 0);
Promise.resolve().then(()=>{console.log('then 1');}).then(()=>{console.log('then 2');});
console.log('3');
// 3
// then 1
// then 2
// timeout 0

4. 立即resolve的Promise对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上面代码中,setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.resolve()在本轮“事件循环”结束时执行,console.log(’one‘)则是立即执行,因此最先输出。

参考

  1. 阮一峰的ES6#Promise对象
  2. JavaScript Promise迷你书(中文版)#2.8. Promise.all
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6(ECMAScript 2015)引入了Promise对象,它是一种异步编程的解决方案。当一个异步操作完成后,Promise对象会返回一个代表操作结果的值,而不是像传统方式那样使用回调函数。 Promise对象的then方法用于指定操作成功和失败时的回调函数。而且可以将then方法连续使用,形成链式调用。当一个Promise对象的then方法返回另一个Promise对象时,后续的then方法都会等待该Promise对象的状态改变。 链式调用的好处在于减少了回调函数嵌套的层数,提高了代码的可读性和可维护性。通过then方法的链式调用,可以构建一串异步操作,使得代码逻辑更加清晰。 例如: ``` function getJSON(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error('Unable to fetch data')); } } }; xhr.send(); }); } getJSON('/data/user.json') .then(user => { return getJSON(`/data/profile/${user.id}.json`); }) .then(profile => { console.log(profile); }) .catch(error => { console.error(error); }); ``` 上述代码展示了一个获取用户信息和个人资料的异步操作,其getJSON函数返回一个Promise对象。通过then方法的链式调用,可以先获取用户信息,然后再获取个人资料。如果有任何一个异步操作失败,则会进入catch回调函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值