前端路 - JavaScript 中的异步编程方案

Promise 方案

---

误区

在一个 Promise 的回调中调用另一个 Promise，即 Promise 的嵌套调用，形成了回调地狱。

promise().then(res => {
    promise().then(re => {
        promise().then(r => {})
    })
})

链式调用

• Promise 对象的 then 方法会返回一个全新的 Promise 对象
• 后边的 then 方法就是在为上一个 then 返回的 Promise 注册回调
• 前面 then 方法中，回调函数的返回值会作为后边 then 方法的回调参数
• 如果回调中返回的是 Promise，那后边 then 方法的回调会等待它的结束

promise()
    .then(() => {})
    .then(() => {})
    .then(() => {})

异常处理

// e.g.1
promise().then(res => {}, err => {})

// e.g.2
promise()
    .then(res => {})
    .catch(err => {})

• 两种写法均能够捕获到回调异常（错误）
• 方法一仅能够捕获到 promise() 本身的异常，而无法捕获到前边 then() 中的异常。
• 方法二则能够捕获到前边 then() 以及原本的 promise() 中的异常，因为 promise 中的异常会随着链条向后传递，知道被捕获

promise 静态方法

Promise.resolve()
Promise.reject()
Promise.all() // 监听所有的promise完成
Promise.race() // 只要有一个完成便返回

 

Generator 方案

---

概念

• Generator 函数，又称为生成器函数
• 声明的关键字是：function *
• 执行后生成一个生成器对象
• 使用 yield 语句使 Generator 函数暂停执行，知道 next() 方法的调用

案例

function * main () {
    try {
        const a = yield promise();
        const c = yield promise();
        const d = yield promise();
    } catch (err) {
        console.log(err)
    }
}

 

Async 方案

---

async function main () {
  try {
    const users = await ajax('/api/users.json')
    console.log(users)

    const posts = await ajax('/api/posts.json')
    console.log(posts)

    const urls = await ajax('/api/urls.json')
    console.log(urls)
  } catch (e) {
    console.log(e)
  }
}

// co(main)
const promise = main()

promise.then(() => {
  console.log('all completed')
})