本瓜一直觉得 Promise 就是咱 JS 人的浪漫，没错，Promise 天天见，但或许越熟悉越陌生，我们在一直用的过程中会形成一些定式，这导致难免会漏掉一些定式以外的要点；
本篇带来 Promise 5 个避免，以供自查！！
1. 避免回调地狱
啥？Promise 就是来解决回调地狱的，如果还写成这个样子，那一切还有什么意义？
userLogin('user').then(function(user){ getArticle(user).then(function(articles){ showArticle(articles).then(function(){ //Your code goes here... }); });});
复制代码
正确写法如下：
userLogin('user') .then(getArticle) .then(showArticle) .then(function(){ //Your code goes here...});
复制代码
当然，如果处理函数包含异步过程，记得是返回 Promise 对象：
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function(result) {
alert(result); // 1
return new Promise((resolve, reject) => { // (*) setTimeout(() => resolve(result * 2), 1000); });
}).then(function(result) { // (**)
alert(result); // 2
return new Promise((resolve, reject) => { setTimeout(() => resolve(result * 2), 1000); });
}).then(function(result) {
alert(result); // 4
});
复制代码
2. 避免 Promise 中 try catch
在 Promise 中使用 try...catch...，如果出现错误将不会走到 Promise.catch()，所以，要避免在 Promise 中 try catch；
new 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 块的情况下捕获其范围内的所有错误（甚至是错别字）：
new Promise((resolve, reject) => { const data = doThis(); // do something resolve()}) .then(data => console.log(data)) .catch(error => console.log(error));
复制代码
3. 避免错误使用 async await
Async/Await 是一种更高级的语法，用于处理同步代码中的多个 Promise。当我们在函数声明之前使用 async 关键字时，它会返回一个 Promise，我们可以使用 await 关键字来停止代码，直到正在等待的 Promise 得以解决或拒绝；
但是将 Async 函数放入 Promise 中，它会产生一些副作用！
比如以下代码将不会捕捉到错误：
// This code can't handle the errornew 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，此时，只能使用 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. 避免声明即运行
当我们写出以下代码，内部请求将会立即执行；
const myPromise = new Promise(resolve => { // code to make HTTP request resolve(result);});
复制代码
但是我们的期望是，调起它的时候才执行，所以我们在外部封装一层函数；
const createMyPromise = () => new Promise(resolve => { // HTTP request resolve(result);});
复制代码
这样做的好处就是，当用它的时候，它才执行，而不是我声明它的时候，就执行了~
将 Promise 惰性处理✔ 没错，又是函数式编程中惰性求值的思想！！
5. 避免遗漏使用 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'); })();
复制代码
使用 Promise.all() 是这样的：
(async () => { console.time('concurrent'); await Promise.all([f1(), f2(), f3()]); console.timeEnd('concurrent'); })();
复制代码
高下立见！Promise 提供的衍生的一些 API 就是拿来用的（Promise.all、Promise.race、Promise.finally 等待），该用就用，别客气~
<hr>
OK，以上就是本篇分享啦~
撰文不易，点赞鼓励👍👍👍👍👍👍
我是掘金安东尼，公众号同名，日拱一卒、日掘一金，再会~
评论