前端路 - 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')
})

最后

以上就是任性电脑为你收集整理的前端路 - JavaScript 中的异步编程方案的全部内容，希望文章能够帮你解决前端路 - JavaScript 中的异步编程方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。