Javascript Promise 20 题，加深理解 Promise

0x00

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

答案 >folded

1
2

0x01 执行顺序

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

答案 >folded

1
2
4
3

0x02

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)

答案 >folded

promise1 Promise { <state>: "pending" }
promise2 Promise { <state>: "pending" }
promise1 Promise { <state>: "fulfilled", <value>: "success" }
promise2 Promise { <state>: "rejected", <reason>: Error: "error!!!" }

0x03 宏任务与微任务

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

答案 >folded

1
2
4
3
5

0x04

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)
  })

答案 >folded

then: success1

0x05

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)
})

答案 >folded

once
success 1000 注：理想情况为 1000，实际可能是 1000 多
success 1000 注：理想情况为 1000，实际可能是 1000 多

0x06

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

答案 >folded

then: Error: error!!!

0x07

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

答案 >folded

SpiderMonkey:
  TypeError: A promise cannot be resolved with itself. 
V8:
  TypeError: Chaining cycle detected for promise #<Promise>

0x08

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

答案 >folded

1

0x09

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

答案 >folded

fail2: Error: error

Promise.resolve()
  .then(function success1 (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .then(function success2 (res) {
  }, function fail2 (e) {
    console.error('fail2: ', e)
  })

答案 >folded

fail2: Error: error

0x0a

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

答案 >folded

end
nextTick
then
setImmediate

0x0b

const first = () => (new Promise((resolve, reject) => {
  console.log(3);
  let p = new Promise((resolve, reject) => {
    console.log(7);
    setTimeout(() => {
      console.log(5);
      resolve(6);
    }, 0)
    resolve(1);
  });
  resolve(2);
  p.then((arg) => {
    console.log(arg);
  });
}));
first().then((arg) => {
  console.log(arg);
});
console.log(4);

答案 >folded

3
7
4
1
2
5

0x0c

var p = new Promise((resolve, reject) => {
  reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

答案 >folded

The Fails!
The Fails!

0x0d

var p = new Promise((resolve, reject) => {
  return Promise.reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

答案 >folded

Uncaught (in promise) Error: The Fails!

0x0e

var p = new Promise((resolve, reject) => {
  reject(Error('The Fails!'))
})
  .catch(error => console.log(error))
  .then(error => console.log(error))

答案 >folded

Error: The Fails!
undefined

0x0f

new Promise((resolve, reject) => {
  resolve('Success!')
}).then(() => {
  throw Error('Oh noes!')
}).catch(error => {
  return "actually, that worked"
}).catch(error => console.log(error.message))

答案 >folded

[No output]

0x10

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
    return data
  })
  .then(console.log)

答案 >folded

SUCCESS!
SUCCESS!

0x11

Promise.resolve('Success!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return 'actually, that worked'
  })
  .then(data => {
    throw Error('The fails!')
  })
  .catch(error => console.log(error.message))

答案 >folded

The fails!

0x12

const first = () => (new Promise((resolve, reject) => {
  console.log(3);
  let p = new Promise((resolve, reject) => {
    console.log(7);
    setTimeout(() => {
      console.log(5);
      resolve(6);
    }, 0);
    resolve(1);
  }); 
  resolve(2);
  p.then((arg) => {
    console.log(arg);
  });
}));
first().then((arg) => {
  console.log(arg);
});
console.log(4);

答案 >folded

3
7
4
1
2
5

0x13

async function async1() {
  console.log(1);
  const result = await async2();
  console.log(3);
}

async function async2() {
  console.log(2);
}

Promise.resolve().then(() => {
  console.log(4);
});

setTimeout(() => {
  console.log(5);
});

async1();
console.log(6);

答案 >folded

1
2
6
4
3
5

参考资料：
https://zhuanlan.zhihu.com/p/34421918
https://zhuanlan.zhihu.com/p/30797777
https://zhuanlan.zhihu.com/p/98164787
https://juejin.cn/post/6844903986210816013#heading-3
https://juejin.cn/post/6844903605250572302