乐趣区

关于前端:使用-Promise-时的5个常见错误你占了几个

jiezi

作者：Ravidu Perera
译者：前端小智
起源：medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

Promise 提供了一种优雅的办法来解决 JS 中的异步操作。这也是防止“回调天堂”的解决方案。然而，并没有多少开发人员理解其中的内容。因而，许多人在实践中往往会犯错误。

在本文中，介绍一下应用 promise 时的五个常见谬误，心愿大家可能防止这些谬误。

1. 防止 Promise 天堂

通常，Promise 是用来防止回调天堂。但滥用它们也会导致 Promise 是天堂。

userLogin('user').then(function(user){getArticle(user).then(function(articles){showArticle(articles).then(function(){//Your code goes here...});
    });
});

在下面的例子中，咱们对 userLogin、getararticle 和 showararticle 嵌套了三个 promise。这样复杂性将按代码行比例增长，它可能变得不可读。

为了防止这种状况，咱们须要解除代码的嵌套，从第一个 then 中返回 getArticle，而后在第二个 then 中解决它。

userLogin('user')
  .then(getArticle)
  .then(showArticle)
  .then(function(){//Your code goes here...});

2. 在 Promise 中应用 try/catch 块

通常状况下，咱们应用 try/catch 块来处理错误。然而，不倡议在 Promise 对象中应用try/catch。

这是因为如果有任何谬误，Promise 对象会在 catch 内主动解决。

ew Promise((resolve, reject) => {
  try {const data = doThis();
    // do something
    resolve();} catch (e) {reject(e);
  }
})
  .then(data => console.log(data))
  .catch(error => console.log(error));

在下面的例子中，咱们在 Promise 内应用了 try/catch 块。

然而，Promise 自身会在其作用域内捕获所有的谬误（甚至是打字谬误），而不须要 try/catch块。它确保在执行过程中抛出的所有异样都被获取并转换为被回绝的 Promise。

new Promise((resolve, reject) => {const data = doThis();
  // do something
  resolve()})
  .then(data => console.log(data))
  .catch(error => console.log(error));

留神：在 Promise 块中应用 .catch() 块是至关重要的。否则，你的测试案例可能会失败，而且应用程序在生产阶段可能会解体。

3. 在 Promise 块内应用异步函数

Async/Await 是一种更高级的语法，用于解决同步代码中的多个 Promise。当咱们在一个函数申明前应用 async 关键字时，它会返回一个 Promise，咱们能够应用 await 关键字来进行代码，直到咱们正在期待的 Promise 解决或回绝。

然而，当你把一个 Async 函数放在一个 Promise 块外面时，会有一些副作用。

假如咱们想在 Promise 块中做一个异步操作，所以应用了 async 关键字，但，不巧的是咱们的代码抛出了一个谬误。

这样，即便应用 catch() 块或在 try/catch 块内期待你的 Promise，咱们也不能立刻解决这个谬误。请看上面的例子。

// 此代码无奈处理错误
new Promise(async () => {throw new Error('message');
}).catch(e => console.log(e.message));

(async () => {
  try {await new Promise(async () => {throw new Error('message');
    });
  } catch (e) {console.log(e.message);
  }
})();

当我在 Promise 块内遇到 async 函数时，我试图将 async 逻辑放弃在 Promise 块之外，以放弃其同步性。10 次中有 9 次都能胜利。

然而，在某些状况下，可能须要一个 async 函数。在这种状况下，也别无选择，只能用try/catch 块来手动治理。

new Promise(async (resolve, reject) => {
  try {throw new Error('message');
  } catch (error) {reject(error);
  }
}).catch(e => console.log(e.message));


//using async/await
(async () => {
  try {await new Promise(async (resolve, reject) => {
      try {throw new Error('message');
      } catch (error) {reject(error);
      }
    });
  } catch (e) {console.log(e.message);
  }
})();

4. 在创立 Promise 后立刻执行 Promise 块

至于上面的代码片断，如果咱们把代码片断放在调用 HTTP 申请的中央，它就会被立刻执行。

const myPromise = new Promise(resolve => {
  // code to make HTTP request
  resolve(result);
});

起因是这段代码被包裹在一个 Promise 构造函数中。然而，有些人可能会认为只有在执行 myPromise 的then 办法之后才被触发。

然而，假相并非如此。相同，当一个 Promise 被创立时，回调被立刻执行。

这意味着在建设 myPromise 之后达到上面一行时，HTTP 申请很可能曾经在运行，或者至多处于调度状态。

Promises 总是急于执行过程。

然而，如果心愿当前再执行 Promises，应该怎么做？如果当初不想收回 HTTP 申请怎么办？是否有什么神奇的机制内置于 Promises 中，使咱们可能做到这一点？

答案就是应用函数。函数是一种耗时的机制。只有当开发者明确地用 () 来调用它们时，它们才会执行。简略地定义一个函数还不能让咱们失去什么。所以，让 Promise 变得懈怠的最无效办法是将其包裹在一个函数中!

const createMyPromise = () => new Promise(resolve => {
  // HTTP request
  resolve(result);
});

对于 HTTP 申请，Promise 构造函数和回调函数只有在函数被执行时才会被调用。所以当初咱们有一个懈怠的 Promise，只有在咱们须要的时候才会执行。

5. 不肯定应用 Promise.all() 办法

如果你曾经工作多年，应该曾经晓得我在说什么了。如果有许多彼此不相干的 Promise，咱们能够同时解决它们。

Promise 是并发的，但如你一个一个地期待它们，会太费时间，Promise.all()能够节俭很多工夫。

记住，Promise.all() 是咱们的敌人

const {promisify} = require('util');
const sleep = promisify(setTimeout);

async function f1() {await sleep(1000);
}

async function f2() {await sleep(2000);
}

async function f3() {await sleep(3000);
}


(async () => {console.time('sequential');
  await f1();
  await f2();
  await f3();
  console.timeEnd('sequential');  
})();

上述代码的执行工夫约为 6 秒。但如果咱们用 Promise.all() 代替它，将缩小执行工夫。

(async () => {console.time('concurrent');
    await Promise.all([f1(), f2(), f3()]);
    console.timeEnd('concurrent'); 
  })();

总结

在这篇文章中，咱们探讨了应用 Promise 时常犯的五个谬误。然而，可能还有很多简略的问题须要认真解决。

如果你还有更多相干的谬误，欢送留言一起探讨。

~ 完，我是刷碗智，励志等退休后，要回家摆地摊的人，咱们下期见！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://blog.bitsrc.io/5-comm…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版