在开发中,了解 JavaScript 和 Promise 基础,有助于提高我们的编码技能,今天,我们一起来看看下面的 10 片段,相信看完这 10 个片段有助于我们对 Promise 的理解。
片段1:Promise
同步执行,promise.then
异步执行。
promise
有三种不同的状态:
pending
fulfilled
rejected
一旦状态更新,pending->fulfilled
或pending->rejected
,就可以再次更改它。prom1
与prom2
不同,并且两者都返回新的Promise
状态。
即使reject
后有一个resolve
调用,也只能执行一次resolve
或reject
,剩下的不会执行。
Promises
可以链接调用,当提到链接调用 时,我们通常会考虑要返回 this
,但Promises
不用。每次 promise 调用.then
或.catch
时,默认都会返回一个新的 promise,从而实现链接调用。
promise 的 .then
或.catch
可以被多次调用,但是此处Promise
构造函数仅执行一次。换句话说,一旦promise
的内部状态发生变化并获得了一个值,则随后对.then
或.catch
的每次调用都将直接获取该值。
.then
或.catch
返回的值不能是promise本身,否则将导致无限循环。
在.then
或.catch
中返回错误对象不会引发错误,因此后续的.catch
不会捕获该错误对象,需要更改为以下对象之一:
return Promise.reject(new Error('error')) throw new Error('error')
因为返回任何非promise 值都将包装到一个Promise
对象中,也就是说,返回new Error('error')
等同于返回Promise.resolve(new Error('error'))
。
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
// 1
.then
或.catch
的参数应为函数,而传递非函数将导致值的结果被忽略,例如.then(2)
或.then(Promise.resolve(3)
。
.then
可以接受两个参数,第一个是处理成功的函数,第二个是处理错误的函数。.catch
是编写.then
的第二个参数的便捷方法,但是在使用中要注意一点:.then
第二个错误处理函数无法捕获第一个成功函数和后续函数抛出的错误。.catch捕获先前的错误。当然,如果要重写,下面的代码可以起作用:
process.nextTick
和promise.then
都属于微任务,而setImmediate
属于宏任务,它在事件循环的检查阶段执行。在事件循环的每个阶段(宏任务)之间执行微任务,并且事件循环的开始执行一次。
作者:Jay Chow 译者:前端小智 来源:jamesknelson
原文:http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/
交流看着涟漪特效,我回忆起了初恋的感觉
Vue中 props 这些知识点,可以在来复习一下!
这5个 console.log() 技巧帮你提高工作效率
vue 中4个级别的作用域
上次24个实用 ES6 方法受到好评,这次再来 10个