Promise相关整理

[ckinmind]

参考资料

• promise ppt
• 面试问到 Promise，这样回答最完美了

知识点

• Promise实例具有then方法，then方法是定义在原型对象上的。它的作用是为Promise实例添加状态改变时的回调函数
• then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数
• then方法返回的是一个新的Promise实例

[ckinmind]

1. demo

function timeout(ms) {
  return new Promise((resolve, reject) => {
   setTimeout(resolve, ms, 'done') 
 })
}

timeout(100).then(value => {
  console.log(value) // done
})

[ckinmind]

2. demo

let promise = new Promise((resolve, reject) => {
  console.log('Promise')
  resolve()
})
console.log('test')
promise.then(() => {
  console.log('resolved')
})
console.log('Hi')

// Promise
// test
// Hi
// resolved

• 上面代码中，Promise新建后立即执行，所以首先输出的是Promise，然后then方法指定回调函数，将在当前脚本所有同步任务执行完成后才会执行，所以resolved最后输出

[ckinmind]

3. demo

setTimeout(() => { 
  console.log(1)
}, 0)

new Promise((resolve, reject) => {
  console.log(2)
  for(let i = 0; i < 10; i++) {
    i == 9 && resolve()
  }
  console.log(3)
}).then(() => {
  console.log(4)
})
console.log(5)

输出 2 3 5 4 1

• then和settimeout执行顺序，即setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.then()在本轮“事件循环”结束时执行。因此then 函数先输出，settimeout后输出

[ckinmind]

4. demo

new Promise(function(resolve){
    console.log('promise begin')
    for( var i=0 ; i<10000 ; i++ ){
        i==5000 && console.log('loop...')
        i==9999 && resolve()
    }
    console.log('promise end')
}).then(function(){
    console.log('callback')
})
console.log('other...')

// promise begin
// loop...
// promise end
// other...
// callback

为什么是先打印 other 后打印 callback 呢
问题地址: 关于 Promise 执行顺序的一个问题？

• then(fn)并不⽴即执⾏fn，⽽是把fn放进⼀个队列（Promise的Job Queue），这个队列的执⾏优先级低于JS栈，fn被放⼊队列后，console.log⽴即执⾏，进⼊调⽤栈，fn必须等待console.log执⾏完后才能执⾏

.then(function(){
  console.log('callback')
}) // 放⼊队列，等待调⽤栈空闲

console.log('other...'); // 放⼊调⽤栈，⽴即执⾏（阻塞队列）

[ckinmind]

5. demo

 console.log(1)
  setTimeout(() => {
    console.log(2)
  }, 0)
  
  new Promise(resolve => {
    console.log(3);
    resolve() 
  }).then(() => setTimeout(() => {
    console.log(4)
  }, 0))
    .then(() => console.log(5))
    
  console.log(6)

13 6 5 2 4

• 虽然setTimeout设置了立马执行，但在不同浏览器中，它是有延时的。chrome延时4ms，旧的ie延时1/60s。是一个异步执行的函数，在以上代码中最后执行

• Promise.then()也是一个异步的函数，但跟setTimeout相比，Promise.then()是一个micro task，setTimeout是一个macro task，Promise.then()远比setTimeout`执行的快

• Promise.resolve()是同步的，按顺序执行

• Promise.resolve().then(() => {})相当于new Promise(resolve => resolve()).then()

[ckinmind]

6. 让Promise等待指定时间

function delayPromise(ms) {
  return new Promise(function (resolve) {
    setTimeout(resolve, ms)
  })
}

delayPromise(100).then(function () {
  console.log('已经过了100ms')
})

[ckinmind]

7. demo

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

//  then: Error: error!!!
//    at Promise.resolve.then (...)
//    at ...

• .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获，需要改成其中一种：
  • return Promise.reject(new Error('error!!!'))
  • throw new Error('error!!!')
• 因为返回任意一个非 promise 的值都会被包裹成 promise 对象，即 return new Error('error!!!') 等价于 return Promise.resolve(new Error('error!!!'))

[ckinmind]

8. demo

process.nextTick(() => {
  console.log('nextTick')
})
Promise.resolve()
  .then(() => {
    console.log('then')
  })
setImmediate(() => {
  console.log('setImmediate')
})
console.log('end')

• process.nextTick 和 promise.then 都属于 microtask，而 setImmediate 属于 macrotask，在事件循环的 check 阶段执行。事件循环的每个阶段（macrotask）之间都会执行 microtask，事件循环的开始会先执行一次 microtask