我们好，前两篇该文他们一同自学了「JavaScript此基础」PromiseH55N, 知道了ES6减少的新优点——Promise让他们能更为典雅的手写反弹表达式，确切了Promise有什么样状况，以及如何撰写Promise的有关标识符。第一集该文，小贴士将和我们一同自学触发器程式设计的今后——async/await，它会冲破你对上篇该文Promise的知觉，居然触发器标识符还能那么写! 但是圣阿穆县潇洒，你须要深入细致知觉Promise后，就可以更快的的操控async/await，因为async/await是如前所述Promise的，没知觉Promise，小贴士雷西县诸位再看一看「JavaScript此基础」Promise采用指南。如果你除非掌控了怎样采用async/await，就没必要性采用Promise了（假如你须要将反弹类别的API切换为async/await,你须要采用到Promise)。
有关async / await
用作撰写触发器程序标识符手写形式和并行代码相仿，因此标识符极为简约易懂如前所述Promise您能采用try和catch常规性的形式捕捉极度ES8中导入了async/await，目前基本上大部份应用程序都已全力支持这个优点（除IE和Opera不全力支持）你能随心所欲增设PT5716SB0，增容更容易。从async已经开始扬名立万
让他们从asyncURL已经开始吧，那个关键字能放到表达式以后，如下表所示右图：
async function f() { return 1; }在表达式间加之async意味著：表达式将回到两个Promise,虽然你的标识符里没表明的心灵回到两个Promise,但是编译器会自动将其切换成两个Promise中，不信你能采用Promise的then语法试试：
async function f() { return 1; } f().then(alert); // 1…如果你不放心的话，你能再标识符里明确回到两个Promise,输出结果是相同的。
async function f() { return Promise.resolve(1); } f().then(alert); // 1很简单吧，小贴士之所以说 async/await 是如前所述Promise是没毛病的，async确保表达式回到两个Promise，很简单吧，不仅如此，还有两个URLawait,await只能在async中运行。
等待——await
await的基本语法：
let value=await promise;该URL的await的意思就是让JS编译器等待Promise并回到结果。接下来他们看一段简单的示例：
async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(“done!”), 1000) }); let result = await promise; // wait till the promise resolves (*) alert(result); // “done!” } f();表达式执行将会在 let result = await promise 这一行暂停，直到Promise回到结果，因此上述标识符将会1秒后，在应用程序弹出“done”的提示框。
小贴士在此强调下：
await的字面意思就是让JavaScript等到Promise结束，然后输出结果。这里并不会占用CPU资源，因为引擎能同时执行其他任务：其他脚本或处理事件。不能单独采用await，必须在async函数作用域下采用，否则将会报出极度“Error: await is only valid in async function”，比如以下标识符：function f() { let promise = Promise.resolve(1); let result = await promise; // Syntax error }接下来，小贴士将和我们一同来亲自动手实践以下内容：
一同动手以后，确保你安装了Node,NPM有关工具，谷歌应用程序，为了预览标识符效果，小编采用 npm install http-server -g 命令快速部署了web服务环境，方便他们运行标识符。接下来，他们写两个火箭发射场景的小例子。
async与Promise.then的结合采用,依次处理多个执行结果
通过控制台命令切换至工作区创建两个async-function-Promise-chain的文件夹在main.js中用创建第两个回到随机表达式的async表达式getRandomNumber：async function getRandomNumber() { console.log(Getting random number.); return Math.random(); } 在创建两个async表达式determinReadyToLaunch：如果传入参数大于0.5将回到Trueasync function deteremineReadyToLaunch(percentage) { console.log(Determining Ready to launch.); return percentage>0.5; } 创建第三个async表达式reportResults，如果传入参数为True将进入倒计时发射async function reportResults(isReadyToLaunch) { if (isReadyToLaunch) { console.log(Rocket ready to launch. Initiate countdown: ); } else { console.error(Rocket not ready. Abort mission: ); } } 创建两个main表达式，调用getRandomNumber表达式，并且通过Promise.then形式相机调用determineReadyToLaunch和reportResults表达式export function main() { console.log(Before Promise created); getRandomNumber() .then(deteremineReadyToLaunch) .then(reportResults) console.log(After Promise created); } 新建两个html文件导入main.js<html> <script type=”module”> import {main} from ./main10.js; main(); </script> <body> </body> </html> 在工作区域运行 http-server 命令，你将会看到如下表所示输出采用await替代Promise.then，依次处理多个执行结果
上一节，我们采用Promise.then依次处理了多个执行结果，本小节，小贴士将采用await实现同样的功能，具体操作如下表所示：
通过控制台命令切换至工作区创建两个async-function-Promise-chain的文件夹在main.js中用创建第两个回到随机表达式的async表达式getRandomNumber：async function getRandomNumber() { console.log(Getting random number.); return Math.random(); } 在创建两个async表达式determinReadyToLaunch：如果传入参数大于0.5将回到Trueasync function deteremineReadyToLaunch(percentage) { console.log(Determining Ready to launch.); return percentage>0.5; } 创建第三个async表达式reportResults，如果传入参数为True将进入倒计时发射async function reportResults(isReadyToLaunch) { if (isReadyToLaunch) { console.log(Rocket ready to launch. Initiate countdown: ); } else { console.error(Rocket not ready. Abort mission: ); } } 创建两个main表达式，调用getRandomNumber表达式，并且通过Promise.then形式相机调用determineReadyToLaunch和reportResults表达式export async function main() { const randomNumber = await getRandomNumber(); const ready = await deteremineReadyToLaunch(randomNumber); await reportResults(ready); } 在工作区域运行 http-server 命令，你将会看到如下表所示输出同时等待多个执行结果
有时候他们须要同时启动多个触发器，无需依次等待结果消耗时间，接下来的例子能采用await 同时启动和等待多个结果。
通过控制台命令切换至工作区创建两个await-concurrently的文件夹创建三个表达式功能checkEngines，checkFlightPlan，和checkNavigationSystem用来记录信息时，这三个表达式都回到两个Promise，示例代码如下表所示：function checkEngines() { console.log(checking engine); return new Promise(function (resolve) { setTimeout(function() { console.log(engine check completed); resolve(Math.random() < 0.9) }, 250) }); } function checkFlightPlan() { console.log(checking flight plan); return new Promise(function (resolve) { setTimeout(function() { console.log(flight plan check completed); resolve(Math.random() < 0.9) }, 350) }); } function checkNavigationSystem() { console.log(checking navigation system); return new Promise(function (resolve) { setTimeout(function() { console.log(navigation system check completed); resolve(Math.random() < 0.9) }, 450) }); } 创建两个async 的main表达式调用上一步创建表达式。将每个回到的值分配给局部变量。然后等待Promise的结果，并输出结果： export async function main() { const enginePromise = checkEngines(); const flighPlanPromise = checkFlightPlan(); const navSystemPromise = checkNavigationSystem(); const enginesOk = await enginePromise; const flighPlanOk = await flighPlanPromise; const navigationOk = await navSystemPromise; if (enginesOk && flighPlanOk && navigationOk) { console.log(All systems go, ready to launch: ); } else { console.error(Abort the launch: ); if (!enginesOk) { console.error(engines not ready); } if (flighPlanOk) { console.error(error found in flight plan); } if (navigationOk) { console.error(error found in navigation systems); } } } 在工作区域运行 http-server 命令，你将会看到如下表所示输出采用Promise.all收集多个结果
在上一小节中，他们一同自学了怎样触发多个触发器并等待多个触发器结果。上一节他们只采用了asyc/ await，本节小贴士和我们一同采用Promise.all来收集多个触发器的结果，在某些情况下，尽量采用Promise有关的API，具体的标识符如下表所示：
通过控制台命令切换至工作区创建两个Promise-all-collect-concurrently的文件夹创建三个表达式功能checkEngines，checkFlightPlan，和checkNavigationSystem用来记录信息时，这三个表达式都回到两个Promise，示例标识符如下表所示：
function checkEngines() { console.log(checking engine); return new Promise(function (resolve) { setTimeout(function() { console.log(engine check completed); resolve(Math.random() < 0.9) }, 250) }); } function checkFlightPlan() { console.log(checking flight plan); return new Promise(function (resolve) { setTimeout(function() { console.log(flight plan check completed); resolve(Math.random() < 0.9) }, 350) }); } function checkNavigationSystem() { console.log(checking navigation system); return new Promise(function (resolve) { setTimeout(function() { console.log(navigation system check completed); resolve(Math.random() < 0.9) }, 450) }); } 创建两个async 的main表达式调用上一步创建表达式。采用Promise.all收集多个结果，将结果回到给变量，标识符实现如下表所示：export async function main() { const prelaunchChecks = [ checkEngines(), checkFlightPlan(), checkNavigationSystem() ]; const checkResults = await Promise.all(prelaunchChecks); const readyToLaunch = checkResults.reduce((acc, curr) => acc && curr); if (readyToLaunch) { console.log(All systems go, ready to launch: ); } else { console.error(Something went wrong, abort the launch: ); } } } 在工作区域运行 http-server 命令，你将会看到如下表所示输出Promise.all接收多个promise的数组，并整体回到两个Promise,如果和上一小节的标识符进行比较，标识符量少了不少，但是也有个问题，不能回到是哪一步失败。
采用try-catch捕捉极度
并非大部份的async都能成功回到，他们须要能处理程序的极度，在本小节中，你将会看到怎样采用try-catch捕捉async表达式引发的错误,具体操作的流程如下表所示：
通过控制台命令切换至工作区创建两个async-errors-try-catch的文件夹创建两个抛出错误的async表达式addBoostersasync function addBoosters() { throw new Error(Unable to add Boosters); } 创建两个async表达式，performGuidanceDiagnostic它也会抛出两个错误：async function performGuidanceDiagnostic (rocket) { throw new Error(Unable to finish guidance diagnostic)); } 创建两个async的main表达式调用表达式addBosters与performGuidanceDiagnostic ，采用try-catch处理错误： export async function main() { console.log(Before Check); try { await addBosters(); await performGuidanceDiagnostic(); } catch (e) { console.error(e); } } console.log(After Check); 在工作区域运行 http-server 命令，你将会看到如下表所示输出从输出看出，他们采用他们熟悉的try-catch捕捉到了极度，如果第两个发生极度，第二个就不会执行，同时将会记录到发生的极度，并输出到控制台，在下一小节，他们一同将自学到怎样采用try-catch捕捉同时运行多个触发器操作的极度。
怎样处理Promise.all中抛出的错误
在上面的小节中，他们采用了Promise.all来收集多个触发器的执行结果。在收集错误状况，Promise.all更有趣。通常，他们在处理多个错误时，同时表明多个错误信息，他们必须撰写有关的业务逻辑。但是，在这小节，你将会采用Promise.all和try-catch捕捉极度，无需撰写复杂的布尔逻辑处理业务,具体怎样实现示例如下：
通过控制台命令切换至工作区创建两个Promise-all-collect-concurrently的文件夹创建三个async功能checkEngines，checkFlightPlan以及checkNavigationSystem表达式用来记录信息时，回到Promise，两个成功的值的信息和两个失败值的信息：function checkEngines() { console.log(checking engine); return new Promise(function (resolve) { setTimeout(function() { console.log(engine check completed); resolve(Math.random() < 0.9) }, 250) }); } function checkFlightPlan() { console.log(checking flight plan); return new Promise(function (resolve) { setTimeout(function() { console.log(flight plan check completed); resolve(Math.random() < 0.9) }, 350) }); } function checkNavigationSystem() { console.log(checking navigation system); return new Promise(function (resolve) { setTimeout(function() { console.log(navigation system check completed); resolve(Math.random() < 0.9) }, 450) }); }创建两个async的main表达式调用每个在上一步中创建的功能表达式。等待结果，捕捉并记录引发的任何错误。如果没抛出错误，则记录成功：
export async function main() { try { const prelaunchChecks = [ checkEngines, checkFlightPlan, checkNavigationSystem ]; await Promise.all(prelauchCheck.map((check) => check()); console.log(All systems go, ready to launch: ); } catch (e) { console.error(Aborting launch: ); console.error(e); } } } 在工作区域运行 http-server 命令，你将会看到如下表所示输出Promise.all回到两个Promise，当await在错误状况下，会抛出极度。三个触发器promise同时执行，如果其中两个或多个错误得到满足，则会抛出一个或多个错误；
你会发现只有两个错误会被记录下来，与并行标识符一样，他们的标识符可能会抛出多个极度，但只有一会被catch块捕捉并记录。
采用finally确保表达式执行
错误处理可能会变得相当复杂。有些情况，其中您希望错误继续冒泡调用堆栈以便执行其它更高级别处理。在这些情况下，您可能还须要执行一些清理任务。本小节，你将了解怎样采用finally以确保执行某些标识符，而不管错误状况怎样,具体怎样实现示例如下表所示：
通过控制台命令切换至工作区创建两个Promise-all-collect-concurrently的文件夹创建三个async功能checkEngines，checkFlightPlan以及checkNavigationSystem表达式用来记录信息时，回到Promise，两个成功的值的信息和两个失败值的信息：function checkEngines() { console.log(checking engine); return new Promise(function (resolve, reject) { setTimeout(function () { if (Math.random() > 0.5) { reject(new Error(Engine check failed)); } else { console.log(Engine check completed); resolve(); } }, 250) }); } function checkFlightPlan() { console.log(checking flight plan); return new Promise(function (resolve, reject) { setTimeout(function () { if (Math.random() > 0.5) { reject(new Error(Flight plan check failed)); } else { console.log(Flight plan check completed); resolve(); } }, 350) }); } function checkNavigationSystem() { console.log(checking navigation system); return new Promise(function (resolve, reject) { setTimeout(function () { if (Math.random() > 0.5) { reject(new Error(Navigation system check failed)); } else { console.log(Navigation system check completed); resolve(); } }, 450) }); } 创建两个asyncperformCheck表达式，调用上一步中创建的每个表达式。等待结果，并用作finally记录完整的消息：async function performChecks() { console.log(Starting Pre-Launch Checks); try { const prelaunchChecks = [ checkEngines, checkFlightPlan, checkNavigationSystem ]; return Promise.all(prelauchCheck.map((check) => check()); } finally { console.log(Completed Pre-Launch Checks); } } 创建两个async的main表达式调该表达式performChecks。等待结果，捕捉并记录引发的错误。export async function main() { try { await performChecks(); console.log(All systems go, ready to launch: ); } catch (e) { console.error(Aborting launch: ); console.error(e); } } 在工作区域运行 http-server 命令，你将会看到如下表所示输出与上一小节一样，错误在main表达式中进行捕捉，由于finally的存在，让我确切的知道performChecks确保执行输出已完成。你能设想，处理错误是两个重要的任务，并且async/await允许他们采用try/catch的相同形式处理触发器和并行标识符的错误，大大简化了他们处理错误的工作量，让标识符更为简约。
用async/await改写上篇该文Promise的例子
上篇该文「JavaScript此基础」PromiseH55N的最后，他们采用Promise的形式改写了如前所述反弹的例子，本文的最后，他们将用今天学到的内容 async/await改写那个例子， 怎样实现呢，标识符如下表所示：
const fs = require(fs); const path = require(path); const postsUrl = path.join(__dirname, db/posts.json); const commentsUrl = path.join(__dirname, db/comments.json); //return the data from our file function loadCollection(url) { return new Promise(function(resolve, reject) { fs.readFile(url, utf8, function(error, data) { if (error) { reject(error); } else { resolve(JSON.parse(data)); } }); }); } //return an object by id function getRecord(collection, id) { return new Promise(function(resolve, reject) { const data = collection.find(function(element){ return element.id == id; }); resolve(data); }); } //return an array of comments for a post function getCommentsByPost(comments, postId) { return comments.filter(function(comment){ return comment.postId == postId; }); } async function getPost(){ try { const posts = await loadCollection(postsUrl); const post = await getRecord(posts, “001”); const comments = await loadCollection(commentsUrl); const postComments = await getCommentsByPost(comments, post.id); console.log(post); console.log(postComments); } catch (error) { console.log(error); } } getPost();和Promise的形式相比，async/await的实现形式是不是更直观更容易知觉呢，让我基本上能用并行的形式撰写触发器标识符。
结束语
本节内容就介绍到这里，他们学会了怎样采用 async/await 的采用，并且学会了怎样与Promise有关API进行结合，async/await 让他们以并行的形式更容易的撰写触发器标识符，大大降低了撰写触发器表达式的难度。
