隨著Node 7的釋出，越來越多的人開始研究據說是非同步程式設計終級解決方案的 async/await。

非同步程式設計的最高境界，就是根本不用關心它是不是非同步。

async 函式就是隧道盡頭的亮光，很多人認為它是非同步操作的終極解決方案。

async 和 await 起了什麼作用

async 起什麼作用

這個問題的關鍵在於，async 函式是怎麼處理它的返回值的！

我們當然希望它能直接通過return語句返回我們想要的值，但是如果真是這樣，似乎就沒 await 什麼事了。所以，寫段程式碼來試試，看它到底會返回什麼：

async function testAsync() {
  return "hello async";
}
const result = testAsync();
console.log(result);

看到輸出就恍然大悟了——輸出的是一個 Promise 物件。

c:\var\test> node --harmony_async_await .
Promise { 'hello async' }

所以，async 函式返回的是一個 Promise 物件。從文件中也可以得到這個資訊。async 函式（包含函式語句、函式表示式、Lambda表示式）會返回一個 Promise 物件，如果在函式中return一個直接量，async 會把這個直接量通過Promise.resolve()封裝成 Promise 物件。

async 函式返回的是一個 Promise 物件，所以在最外層不能用 await 獲取其返回值的情況下，我們當然應該用原來的方式：then()鏈來處理這個 Promise 物件，就像這樣

testAsync().then(v => {
  console.log(v);  // 輸出 hello async
});

　　語法很簡單，就是在函式前面加上async關鍵字，來表示它是非同步的，那怎麼呼叫呢？async函式也是函式，平時我們怎麼使用函式就怎麼使用它，直接加括號呼叫就可以了，為了表示它沒有阻塞它後面程式碼的執行，我們在async函式呼叫之後加一句console.log;

async function timeout() {
  return 'hello world'
}
timeout();
console.log('雖然在後面，但是我先執行');

　　開啟瀏覽器控制檯，我們看到了

　　async函式 timeout 呼叫了，但是沒有任何輸出，它不是應該返回 'hello world',先不要著急，看一看timeout()執行返回了什麼？把上面的 timeout()語句改為console.log(timeout())

async function timeout() {
  return 'hello world'
}
console.log(timeout());
console.log('雖然在後面，但是我先執行');

　　繼續看控制檯

　　原來async函式返回的是一個promise物件，如果要獲取到promise返回值，我們應該用then方法，繼續修改程式碼

async function timeout() {
  return 'hello world'
}
timeout().then(result => {
  console.log(result);
})
console.log('雖然在後面，但是我先執行');

　　看控制檯

　　我們獲取到了"hello world',同時timeout的執行也沒有阻塞後面程式碼的執行，和我們剛才說的一致。

　　這時，你可能注意到控制檯中的Promise有一個resolved，這是async函式內部的實現原理。如果async函式中有返回一個值,當呼叫該函式時，內部會呼叫Promise.solve()方法把它轉化成一個promise物件作為返回，但如果timeout函式內部丟擲錯誤呢？ 那麼就會呼叫Promise.reject()返回一個promise物件，這時修改一下timeout函式

async function timeout(flag) {
  if (flag) {
    return 'hello world'
  } else {
    throw 'my god,failure'
  }
}
console.log(timeout(true)) // 呼叫Promise.resolve() 返回promise 物件。
console.log(timeout(false)); // 呼叫Promise.reject() 返回promise 物件。

　　控制檯如下：

　　如果函式內部丟擲錯誤， promise物件有一個catch方法進行捕獲。

timeout(false).catch(err => {
  console.log(err)
})

　　async關鍵字差不多了，我們再來考慮await關鍵字，await是等待的意思，那麼它等待什麼呢，它後面跟著什麼呢？其實它後面可以放任何表示式，不過我們更多的是放一個返回promise物件的表示式。注意await關鍵字只能放到async函式裡面

　　現在寫一個函式，讓它返回promise物件，該函式的作用是2s之後讓數值乘以2

// 2s 之後返回雙倍的值
function doubleAfter2seconds(num) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(2 * num)
    },2000);
  } )
}

　　現在再寫一個async函式，從而可以使用await關鍵字， await後面放置的就是返回promise物件的一個表示式，所以它後面可以寫上doubleAfter2seconds函式的呼叫

async function testResult() {
  let result = await doubleAfter2seconds(30);
  console.log(result);
}

　　現在呼叫testResult函式

testResult();

　　開啟控制檯，2s之後，輸出了60.

　　現在我們看看程式碼的執行過程，呼叫testResult函式，它裡面遇到了await,await表示等一下，程式碼就暫停到這裡，不再向下執行了，它等什麼呢？等後面的promise物件執行完畢，然後拿到promise resolve的值並進行返回，返回值拿到之後，它繼續向下執行。具體到我們的程式碼,遇到await之後，程式碼就暫停執行了，等待doubleAfter2seconds(30) 執行完畢，doubleAfter2seconds(30)返回的promise開始執行，2秒之後，promise resolve了，並返回了值為60，這時await才拿到返回值60，然後賦值給result，暫停結束，程式碼才開始繼續執行，執行 console.log語句。

　　就這一個函式，我們可能看不出async/await的作用，如果我們要計算3個數的值，然後把得到的值進行輸出呢？

async function testResult() {
  let first = await doubleAfter2seconds(30);
  let second = await doubleAfter2seconds(50);
  let third = await doubleAfter2seconds(30);
  console.log(first + second + third);
}

　　6秒後，控制檯輸出220,我們可以看到，寫非同步程式碼就像寫同步程式碼一樣了，再也沒有回撥地域了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。