异步&事件循环

1

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

1
2
4

注意这里没有调用 resolve 或 reject，所以 then 不会执行。

2

const promise1 = new Promise((resolve, reject) => {
  console.log("promise1")
  resolve("resolve1")
})
const promise2 = promise1.then((res) => {
  console.log(res)
})
console.log("1", promise1)
console.log("2", promise2)

promise1
1 Promise { <resolved>: 'resolve1' }
2 Promise { <pending> }
resolve1

3

const promise = new Promise((resolve, reject) => {
  console.log(1)
  setTimeout(() => {
    console.log("timerStart")
    resolve("success")
    console.log("timerEnd")
  }, 0)
  console.log(2)
})
promise.then((res) => {
  console.log(res)
})
console.log(4)

1
2
4
timerStart
timerEnd
success

4

Promise.resolve().then(() => {
  console.log("promise1")
  const timer2 = setTimeout(() => {
    console.log("timer2")
  }, 0)
})
const timer1 = setTimeout(() => {
  console.log("timer1")
  Promise.resolve().then(() => {
    console.log("promise2")
  })
}, 0)
console.log("start")

start
promise1
timer1
promise2
timer2

5

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

then: success1

promise 的状态一旦改变，就不会再变。

6

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

1

then 方法接受的参数如果不是函数，会发生值穿透, 且只保留最初的穿透值

7

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 Promise { <pending> }
promise2 Promise { <pending> }
promise1 Promise { <resolved>: success }
promise2 Promise { <rejected>: Error: error!!! }

then 或 catch 中抛出错误，会返回一个新的 promise，且状态为 rejected

8

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

1
2

then 方法中返回的值会被 下一个then 方法接收

9

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

then: Error: error!!!

10

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

TypeError: Chaining cycle detected for promise #<Promise>

then 或 catch 返回的值不能是 promise 本身，否则会造成死循环。

11

Promise.reject("err!!!")
  .then(
    (res) => {
      console.log("success", res)
    },
    (err) => {
      console.log("error", err)
    },
  )
  .catch((err) => {
    console.log("catch", err)
  })

error err!!!

then 方法中，第二个参数就是用于捕获 reject 结果的, 这个参数捕获后就不需要触发接下来的 catch 方法了。

12

Promise.resolve("1")
  .then((res) => {
    console.log(res)
  })
  .finally(() => {
    console.log("finally")
  })
Promise.resolve("2")
  .finally(() => {
    console.log("finally2")
    return "我是finally2返回的值"
  })
  .then((res) => {
    console.log("finally2后面的then函数", res)
  })

1
finally2
finally
finally2后面的then函数 2

第一个 Promise 的 finally 方法必须等待前面的 then 方法执行完

13

function runAsync(x) {
  const p = new Promise((r) => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
 
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then((res) => console.log(res))

1
2
3
[1, 2, 3]

14

function runAsync(x) {
  const p = new Promise((r) => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
function runReject(x) {
  const p = new Promise((res, rej) =>
    setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x),
  )
  return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
  .then((res) => console.log(res))
  .catch((err) => console.log(err))

1
3
2
Error: 2
4

Promise.all 中只要有一个 Promise 对象 reject，那么就会立即触发 Promise.all 的 catch 方法。

15

function runAsync(x) {
  const p = new Promise((r) => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)])
  .then((res) => console.log("result: ", res))
  .catch((err) => console.log(err))

1
result: 1
2
3

Promise.race 方法会返回最先执行完的 Promise 对象的值。

16

function runAsync(x) {
  const p = new Promise((r) => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
function runReject(x) {
  const p = new Promise((res, rej) =>
    setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x),
  )
  return p
}
Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)])
  .then((res) => console.log("result: ", res))
  .catch((err) => console.log(err))

0
Error: 0
1
2
3

17

async function async1() {
  console.log("async1 start")
  await async2()
  console.log("async1 end")
}
async function async2() {
  console.log("async2")
}
async1()
console.log("start")

async1 start
async2
start
async1 end

18

async function async1() {
  console.log("async1 start")
  await async2()
  console.log("async1 end")
  setTimeout(() => {
    console.log("timer1")
  }, 0)
}
async function async2() {
  setTimeout(() => {
    console.log("timer2")
  }, 0)
  console.log("async2")
}
async1()
setTimeout(() => {
  console.log("timer3")
}, 0)
console.log("start")

async1 start
async2
start
async1 end
timer2
timer3
timer1

19

async function async1() {
  console.log("async1 start")
  await new Promise((resolve) => {
    console.log("promise1")
  })
  console.log("async1 success")
  return "async1 end"
}
console.log("srcipt start")
async1().then((res) => console.log(res))
console.log("srcipt end")

script start
async1 start
promise1
script end

20

async function async1() {
  console.log("async1 start")
  await new Promise((resolve) => {
    console.log("promise1")
    resolve("promise1 resolve")
  }).then((res) => console.log(res))
  console.log("async1 success")
  return "async1 end"
}
console.log("srcipt start")
async1().then((res) => console.log(res))
console.log("srcipt end")

script start
async1 start
promise1
script end
promise1 resolve
async1 success
async1 end

21

async function async1() {
  console.log("async1 start")
  await async2()
  console.log("async1 end")
}
 
async function async2() {
  console.log("async2")
}
 
console.log("script start")
 
setTimeout(function () {
  console.log("setTimeout")
}, 0)
 
async1()
 
new Promise((resolve) => {
  console.log("promise1")
  resolve()
}).then(function () {
  console.log("promise2")
})
console.log("script end")

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

22

async function async1() {
  await async2()
  console.log("async1")
  return "async1 success"
}
async function async2() {
  return new Promise((resolve, reject) => {
    console.log("async2")
    reject("error")
  })
}
async1().then((res) => console.log(res))

async2
Uncaught (in promise) error

23

async function async1() {
  await Promise.reject("error!!!").catch((e) => console.log(e))
  console.log("async1")
  return Promise.resolve("async1 success")
}
async1().then((res) => console.log(res))
console.log("script start")

script start
error!!!
async1
async1 success

注意 await 的是 catch

24

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

3
7
4
1
2
5
Promise { <resolved>: 1 }

先遇到哪个 then 就先执行哪个 then

25

const async1 = async () => {
  console.log("async1")
  setTimeout(() => {
    console.log("timer1")
  }, 2000)
  await new Promise((resolve) => {
    console.log("promise1")
  })
  console.log("async1 end")
  return "async1 success"
}
console.log("script start")
async1().then((res) => console.log(res))
console.log("script end")
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then((res) => console.log(res))
setTimeout(() => {
  console.log("timer2")
}, 1000)

script start
async1
promise1
script end
1
timer2
timer1

注意值渗透

26

const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve("resolve3")
    console.log("timer1")
  }, 0)
  resolve("resovle1")
  resolve("resolve2")
})
  .then((res) => {
    console.log(res) // resolve1
    setTimeout(() => {
      console.log(p1)
    }, 1000)
  })
  .finally((res) => {
    console.log("finally", res)
  })

resolve1
finally resolve1
timer1
Promise { <resolved> resolve1}

27

console.log("1")
 
setTimeout(function () {
  console.log("2")
  process.nextTick(function () {
    console.log("3")
  })
  new Promise(function (resolve) {
    console.log("4")
    resolve()
  }).then(function () {
    console.log("5")
  })
})
process.nextTick(function () {
  console.log("6")
})
new Promise(function (resolve) {
  console.log("7")
  resolve()
}).then(function () {
  console.log("8")
})
 
setTimeout(function () {
  console.log("9")
  process.nextTick(function () {
    console.log("10")
  })
  new Promise(function (resolve) {
    console.log("11")
    resolve()
  }).then(function () {
    console.log("12")
  })
})

1
7
6
8
2
4
3
5
9
11
10
12

28

console.log(1)
 
setTimeout(() => {
  console.log(2)
})
 
new Promise((resolve) => {
  console.log(3)
  resolve(4)
}).then((d) => console.log(d))
 
setTimeout(() => {
  console.log(5)
  new Promise((resolve) => {
    resolve(6)
  }).then((d) => console.log(d))
})
 
setTimeout(() => {
  console.log(7)
})
 
console.log(8)

1
3
8
4
2
5
6
7

29

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

1
4
7
5
2
3
6

30

Promise.resolve()
  .then(() => {
    console.log("1")
    throw "Error"
  })
  .then(() => {
    console.log("2")
  })
  .catch(() => {
    console.log("3")
    throw "Error"
  })
  .then(() => {
    console.log("4")
  })
  .catch(() => {
    console.log("5")
  })
  .then(() => {
    console.log("6")
  })

1
3
5
6

31

setTimeout(function () {
  console.log(1)
}, 100)
 
new Promise(function (resolve) {
  console.log(2)
  resolve()
  console.log(3)
}).then(function () {
  console.log(4)
  new Promise((resove, reject) => {
    console.log(5)
    setTimeout(() => {
      console.log(6)
    }, 10)
  })
})
console.log(7)
console.log(8)

2
3
7
8
4
5
6
1