本篇文章给大家分享5个使用 promise 时的常见错误，帮大家快速避坑，希望对大家有所帮助！
Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而，并没有多少开发人员了解其中的内容。因此，许多人在实践中往往会犯错误。【相关推荐：javascript学习教程】
在本文中，介绍一下使用 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 块来手动管理。
讯飞听见
讯飞听见依托科大讯飞的语音识别技术，为用户提供语音转文字、录音转文字等服务，1小时音频最快5分钟出稿，高效安全。
105 查看详情
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 时常犯的五个错误。然而，可能还有很多简单的问题需要仔细解决。
如果你还有更多相关的错误，欢迎留言一起讨论。
英文原文地址：https://blog.bitsrc.io/5-common-mistakes-in-using-promises-bfcc4d62657f
作者：Ravidu Perera
更多编程相关知识，请访问：编程入门！！
以上就是快速避坑，聊聊5个用promise的常见错误！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/554456.html
微信扫一扫 
支付宝扫一扫 
