Promise、Generator和async踩坑记

ES6 异步处理之 Promise 对象、Generator 函数 与 async 函数基础详解

1、Promise 两种容易混淆的用法

• 在有回调函数的方法中

import request from &＃39;request&＃39;;const getThirdData &＃61; async(url, requestData) &＃61;> {return new Promise((resolve, reject) &＃61;> {request.post({url,method: "POST",json: false,headers: {"content-type": "application/json",},body: JSON.stringify(requestData)}, (error, response, body) &＃61;> {// 回调函数error ? reject(error) : resolve(body);})})
}


• 在没有回调函数的方法中

export const getApiListByType &＃61; (projectName) &＃61;> {return new Promise((resolve, reject) &＃61;> {fetch( url, {method: &＃39;GET&＃39;,mode: &＃39;cors&＃39;,credentials: &＃39;include&＃39;}).then(res &＃61;> resolve(res.json())).catch(err &＃61;> reject(err))})
}


2、try-catch 能不能抛出 promise 的异常&＃xff1f;

try-catch 主要用于捕获异常&＃xff0c;注意&＃xff0c;这里的异常&＃xff0c;是指同步函数的异常&＃xff0c;如果 try 里面的异步方法出现了异常&＃xff0c;此时catch 是无法捕获到异常的&＃xff0c;原因是因为&＃xff1a;当异步函数抛出异常时&＃xff0c;对于宏任务而言&＃xff0c;执行函数时已经将该函数推入栈&＃xff0c;此时并不在 try-catch 所在的栈&＃xff0c;所以 try-catch 并不能捕获到错误。对于微任务而言&＃xff0c;比如 promise&＃xff0c;promise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。

下面举两个例子说明&＃xff1a;

// 异步&＃xff0c;宏任务
try {setTimeout(function() {console.log(b);}, 0);
} catch (error) {console.log(error); // 这里是不会执行的
}
console.log(&＃39;out try catch&＃39;);


// 异步&＃xff0c;微任务
try {new Promise(() &＃61;> {throw new Error(&＃39;new promise throw error&＃39;);});
} catch (error) {console.log(error);
}


解决方案&＃xff1a;

• 同步任务&＃xff1a;try…catch 就够了。
• 异步任务&＃xff1a;try…catch 结合 promise 的 catch() 方法一起使用。
  
  

3、forEach 中使用 async 的踩坑

错误再现&＃xff1a;

const updateDataById &＃61; ctx &＃61;> {const { list, id } &＃61; ctx.query;let result &＃61; null;try {result &＃61; list.forEach(async type &＃61;> {await this.update({ id });})} catch (error) {result &＃61; {&＃39;error&＃39;: error};}ctx.body &＃61; result;
}


解决方案&＃xff1a;Promise.all() &＃43; map() 代替 forEach()

const updateDataById &＃61; async(ctx) &＃61;> {const { list, id } &＃61; ctx.query;let result &＃61; null;try {await Promise.all(list.map(async type &＃61;> {return await this.update({ id });})).then(data &＃61;> result &＃61; data}).catch(error &＃61;> result &＃61; error)} catch (error) {result &＃61; {&＃39;error&＃39;: error};}ctx.body &＃61; result;
}


为什么这样改就可以了呢&＃xff1f;
forEach与async/await使用踩坑
理解和使用Promise.all和Promise.race

参考文档&＃xff1a;
try-catch 能抛出 promise 的异常吗
forEach与async/await使用踩坑