js异步

发表于 更新于 分类于 阅读次数：

js 异步…

eventLoop

Event Loop 执行顺序图:

XpBgjx.md.png

异步代码常见规范

  1. reject 一个 Error 对象
1
2
3
4
5
// bad
Promise.reject("error reason");

// good
Promise.reject(new Error("error reason"));
  1. 不要在 Promise 上使用 async

不要把 async 函数传递给 Promise 构造函数，因为没有必要，其次如果 async 函数异常，那么你的 promise 并不会 reject

1
2
3
4
5
6
// bad
new Promise(async (resolve, reject) => {})

// good
new Promise((resolve, reject) => { async function(){coding....}()})

  1. 不要使用 await 在循环中

尽可能将这写异步的任务改为并发，可以大幅提高代码执行效率

1
2
3
4
5
6
7
8
9
10
11
12
// 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);
  1. 不要再 Promise 中使用 return 语句

Promise 构造函数不希望回调返回任何形式的值

return 一般用来控制该函数中的执行流程

1
2
3
4
5
// 一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面
new Promise((resolve, reject) => {
  return resolve(1);
  console.log("2"); // 不会执行
});
1
2
3
4
5
6
7
8
9
10
// 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"));
});
  1. 别忘了异常处理
  • Promise
1
2
3
4
5
6
7
// bad
asyncPromise().then(() => {});

// good
asyncPromise()
  .then(() => {})
  .catch(() => {});
  • async await
1
2
3
4
5
6
7
8
9
10
// bad
const result = await asyncPromise()

// good
try {
    const result = await asyncPrmise()
} catch() {
    // do something
}