手把手教你写高质量 JavaScript 异步代码!
2023-09-27 14:27:34 时间
前言
分享几个我平时写异步代码的小技巧以及我之前看到过得一些不好的写法。
手把手教程
reject一个Error对象
在 reject Promise
时强制使用Error
对象,方便浏览器底层更容易的分配堆栈以及查找堆栈。
// bad
Promise.reject('error reason');
// good
Promise.reject(new Error('error reason'))
复制代码
不要在Promise上使用async
不要把async
函数传递给Promise
构造函数,因为没有必要,其次如果async
函数异常,那么你的promise
并不会reject
。
// bad
new Promise(async (resolve, reject) => {})
// good
new Promise((resolve, reject) => { async function(){coding....}()})
复制代码
不要使用await在循环中
尽可能将这写异步的任务改为并发,可以大幅提高代码执行效率
// bad
for(const apiPath of paths) {
const { data } = await request(apiPath)
}
// good
const results = []
for(const apiPath of paths) {
const res = resquest(apiPath)
results.push(res)
}
await Promise.all(results)
复制代码
不要再Promise中使用return语句
// bad
new Promise((resolve, reject) => {
if(isOK) return 'ok'
return 'not ok'
})
// good
new Promise((resolve, reject) => {
if(isOK) resolve('ok')
reject(new Error('not ok'))
})
复制代码
防止回调地狱
// bad
p1((err, res1) => {
p2(res1, (err, res2) => {
p3(res2, (err, res3) => {
p4(res3, (err, res4) => {
console.log(res4)
})
})
})
})
// good
const res1 = await p1()
const res2 = await p1(res1)
const res3 = await p1(res2)
const res4 = await p1(res3)
console.log(res4)
复制代码
别忘了异常处理
Promise
// bad
asyncPromise().then(() => {})
// good
asyncPromise().then(() => {}).catch(() => {})
复制代码
async aiwat
// bad
const result = await asyncPromise()
// good
try {
const result = await asyncPrmise()
} catch() {
// do something
}
复制代码
不要awiat一个非Promise函数
// bad
function getUserInfo() {
return userInfo
}
await getUserInfo()
// good
async function getUserInfo() {
return userInfo
}
await getUserInfo()
复制代码
不要将Promise作为判断条件或者参数
async function getUserInfo() {
return userInfo
}
// bad
if(getUserInfo()) {}
// good
if(await getUserInfo()) {}
// better
const { userInfo } = await getUserInfo()
if(userInfo) {}
相关文章
- 深入了解JavaScript中的for循环
- 《JavaScript闯关记》之单体内置对象
- The Top 10 Javascript MVC Frameworks Reviewed
- Promise & Generator——幸福地用同步方法写异步JavaScript
- Javascript异步编程的4种方法
- 【javascript】script标签的async异步解析
- 一个格式化日期和时间的JavaScript类库
- 前端学习笔记之JavaScript
- 每一个JavaScript开发者都应该知道的10道面试题
- 【JavaScript】标准内置函数 isFinite
- JavaScript – 用 Generator 运行异步函数 & await async
- Javascript 闭包与变量
- JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
- 2014年3月新鲜出炉的最佳 JavaScript 工具库
- 前端(第一节课 HTML、CSS 、JAVAscript的概念)
- 【笔记】再学JavaScript ES(6-10)全版本语法——回调地狱&异步操作(Promise/then/resolve/reject/catch/all/race)
- 【读书笔记】《你不知道的JavaScript(上卷)》——第二部分 this和对象原型(三)
- javascript函数命名的三种方式及区别
- Javascript 设计模式 辛格尔顿
- JQuery日记6.7 Javascript异步模型(二)
- Js(JavaScript)重定向到其它页面的方法总结
- Javascript async异步操作库简介
- 深入理解 JavaScript 异步系列(2)—— jquery的解决方案