理解koa2 之 async + await + promise

koa是下一代的Node.js web框架。

咱們首先使用koa來實現一個簡單的hello world吧！假如目前的項目結構以下：

### 目錄結構以下：
koa-demo1                              # 工程名
|  |--- app.js                         # node 入口文件
|  |--- node_modules                   # 項目依賴包
|  |--- package.json

app.js 代碼以下：

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
  console.log(ctx);
  await next();
  ctx.response.type = 'text/html';
  ctx.response.body = 'hello world';
});

app.listen(3001);
console.log('app started at port 3001...');

如上，對於頁面中每個http請求，koa將調用如上異步函數來處理。進入項目中的根目錄執行 node app.js 後，在頁面中訪問 http://localhost:3001/ 後刷新看到node控制檯打印 console.log(ctx); 以下信息：

參數ctx是koa傳入封裝的了request和response的變量，如上圖能夠看到，咱們就能夠經過ctx來訪問request和response的數據了，咱們能夠再看下瀏覽器中 header信息以下，咱們能夠對比下 上面圖和下面的圖：

而且咱們在看看瀏覽器中網絡請求能夠看到有以下兩條請求，在node中也能夠看到打印了二次，說明對於頁面中每個http請求，koa將調用如上異步函數來處理的，以下所示：

如上的代碼異步函數中，使用了 await next()；來處理下一個異步函數，和express中的 next()方法相似的功能，而後設置 response的Content-Type的內容。

async的理解爲：用於聲明一個function是異步的，而且返回的是一個promise對象，以下代碼：

async function testAsync() {
  return 'hello world';
}

const a = testAsync();

console.log(a);

在瀏覽器中打印以下：

await的含義是：用於等待一個異步方法執行完成(同步等待)。

await在等待async異步方法執行完畢，await必須在async方法中才能夠使用。

以下代碼demo理解：

function getData () {
  return 'hello world';
}

async function testAsync() {
  return 'hello xxxx';
}

async function testAsync2() {
  const a1 = await testAsync();
  const a2 = await getData();
  console.log(a1); // hello xxxx
  console.log(a2); // hello world
}

testAsync2();

如上代碼 getData是同步方法，testAsync是異步方法的，都會返回一條信息，可是在testAsync2異步方法內部，都使用await 使數據同步返回，所以結果打印： hello xxxx；和 hello world了。

可是若是咱們在 testAsync2 函數內部不使用 await 這個，直接調用 testAsync()方法和getData()方法的話，那麼testAsync就會返回一個promise對象了，以下代碼：

function getData () {
  return 'hello world';
}

async function testAsync() {
  return 'hello xxxx';
}

function testAsync2() {
  const a1 = testAsync();
  const a2 = getData();
  
  console.log(a1); 
  console.log(a2); 
}

testAsync2();

執行結果以下所示：

1. async的做用是？

async函數它會返回一個promise對象，咱們能夠經過promise對象的then方法來獲取如上的 'hello world' 的值，以下代碼所示：

async function testAsync() {
  return 'hello xxxx';
}

const test = testAsync();

console.log(test); // Promise {<resolved>: "hello xxxx"}

test.then(data => {
  console.log(data);  // 打印 hello xxxx
});

2. await的做用是？

await能夠理解爲同步等待當前的async的執行，且等async後的promise對象執行resolve，而後拿到resolve的值，做爲await表達式的運算結果。代碼纔會繼續往下執行。

咱們能夠看以下demo來理解下：

function testA() {
  return 'hello world';
}

async function testA2() {
  return 'xxxx';
}

async function testA3() {
  // 等待返回 'heelo world'
  const a1 = await testA();

  // 待會返回promise對象的resolve的值，纔會繼續往下執行
  const a2 = await testA2();

  console.log(a1 + '--' + a2); // 會打印 hello world--xxxx
}

testA3(); 

3. async + await + promise 解決異步問題

以下基本的代碼：

let url = 'xxxxx'; // url 地址
let asyncFn = async () => {
  let data = null;
  data = await getData(url);
  console.log(data);
}

const getData = function(url) {
  return new Promise((resolve, reject) => {
    // 以下簡單的使用 ajax來演示下，項目中具體使用fetch仍是其餘均可以的
    $.ajax({
      type: 'get',
      dataType: 'json',
      data: {
        
      },
      success: function(d) {
        resolve(d);
      },
      error: function(e) {
        reject(e);
      }
    })
  });
}