这篇文章主要介绍了关于async/await 并行请求和错误处理,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
使用async的时候,代码执行的顺序很容易出错,比如我们要同时发起两个请求,可能会写出下面的代码
function fetchName () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('lujs')
}, 3000)
})
}
function fetchAvatar () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('https://avatars3.githubusercontent.com/u/16317354?s=88&v=4')
}, 4000)
})
}
async fetchUser () {
const name = await fetchName()
const avatar = await fetchAvatar()
return {
name,
avatar
}
}
(async function () {
console.time('should be 7s ')
const user = await fetchUser()
console.log(user)
console.timeEnd('should be 3s ')
})()在上面的代码中,我们认为fetchName,fetchAvatar会并行执行,实际上并不会。fetchAvatar会等待fetchName执行完之后才开始请求。fetchUser函数的执行时间不是三秒而是7秒
要并行请求的话需要像下面这样写,fetchUserParallel的执行时间为4秒
async function fetchUserParallel () {
const namePromise = fetchName()
const avatarPromise = fetchAvatar()
return {
name: await namePromise,
avatar: await avatarPromise
}
}
(async function () {
console.time('should be 3s, but time is ')
const user = await fetchUser()
console.log(user)
console.timeEnd('should be 3s, but time is ')
console.time('should be 3s : ')
const user2 = await fetchUserParallel()
console.log(user2)
console.timeEnd('should be 3s : ')
})()function fetchList (id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`id is : ${id}`)
}, 5000)
})
}
async function getList () {
const ary = [1, 2, 3, 4]
const list = Promise.all(
ary.map(
(id) => fetchList(id)))
return await list
}
(async function () {
// 使用promise并发请求
console.time('should be 3s ')
const list = await getList()
console.log(list)
console.timeEnd('should be 3s ')
})() try {
const user3 = await fetchUser(true)
} catch (err) {
console.error('user3 error:', err)
}参考文章
/**
* 包装promise, 使其返回统一的错误格式
* @param {Promise} promise
*/
function to (promise) {
return promise.then(res => [null, res]).catch(err => [err])
}
.
.
.
const [err, res] = await to(fetchUser(true))
if (err) {
console.error('touser err:', err)
} // 因为async 返回的promise对象,所以可以使用catch
const user4 = await fetchUser(true).catch(err => {
console.error('user4 error:', err)
})有兴趣的可以用弄得运行一下代码,测试代码
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
以上就是async/await 并行请求和错误处理的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号