關鍵詞：async 、await、promise

這三個東西 可以優雅的解決異步問題。在學習koa2的時候遇到了獲取數據后再進行模板渲染的異步問題。在查找各種資料后成功的解決了該問題，現在寫個筆記記錄一下。

先說一下async、await，第一次見到這兩個詞是在學習vue的時候。因為前端在寫代碼的時候經常的會遇到向后臺請求數據這樣的場景，等待數據返回才可以進行下一步的操作。這就不得不處理異步這種情況。

async、await基本的語法就是：

let asyncFn = async（）=> { let data = null; data = await getData(url);//getData()返回的數據是 {name:'my name is data!'} console.log(data.name);//打印出的是my name is data! }

getData();為一個封裝了請求數據的方法；

如果不處理異步的情況：

let notAsyncFn =（）=> { let data = null; data = getData(url);//getData()返回的數據是 {name:'my name is data!'} console.log(data.name);//打印出的是undefined; 因為data此時還是null;}

await 命令后面的 函數返回的是一個Promise 對象，運行結果可能是 rejected，所以最好把 await 命令放在 try...catch 代碼塊中。

getData函數的代碼：

var getData = function (url){  console.log("get start");  console.log(url);  return new Promise(function (resolve, reject) {//下面的request()方法 是nodeJS的request模塊；   request(url, function (error, response, body) {    if (!error && response.statusCode == 200) {     resolve(response.body);    }else{     //throw new Error(response.statusText)     reject('===error===');    }   });  })  console.log("get end"); }

promise的相關介紹可以移步 大白話講解Promise（一）

還有await 命令只能用在 async 函數之中，如果用在普通函數，就會報錯。

koa2中具體的代碼：

/** * koa2路由代碼 *///引入router模塊var router = require('koa-router')();//引入server模塊 封裝的請求函數var server = require('../server');//url 是假的額 寫的百度的網址const url = 'www.baidu.com';router.get('/',async function (ctx,next){ var data = await server.get(url); console.log('======data====='); console.log(data); await ctx.render('myPage',{  title: '123wangcong',  data: data })});module.exports = router;

/** * server模塊的代碼 */node的request模塊var request = require('request');module.exports = { get : function (url){  console.log("get start");  console.log(url);  return new Promise(function (resolve, reject) {   request(url, function (error, response, body) {    if (!error && response.statusCode == 200) {     resolve(response.body);    }else{     //throw new Error(response.statusText)     reject('error===');    }   });  })  console.log("get end"); }}