ES6的一個小特性 --外部獲取異步方法裏面的數據

今天同寢的斯里蘭卡小哥問了我一個問題，關於JS的，不知道是想考考我還是咋滴。果不其然，我不堪入目的JS基礎搞得尷尬，於是好好記下了這個問題，在這裏和大家分享一下，這也是我學習ES6時沒有太在意的一個基礎問題。

先寫兩個demo，然後告訴大家他們的結果：

1：

function get_data() {
  setTimeout(function () {
    var name = 'sa'
    return name
  }, 1000)
}

console.log(get_data());

2：

function get_data() {
  setTimeout(function () {
    var name = 'sa';
  }, 1000)
  return name
}

console.log(get_data());

其實，這兩段代碼都在嘗試在外部獲取異步方法裏面的數據，對於第一個，因爲"return name"根本就沒有被執行，所以得到的是"undefined"，而對於第二個寫法，因爲定義的值name是異步事件，所以return的name並不存在。

那麼正確的應該如何寫呢，這就是回調函數應該發揮作用的時候了。

function get_data(callback) {
  setTimeout(function () {
    let name = '1'
    callback(name)
  }, 1000)
}

get_data(function (data) {
  console.log(data);
})

除了使用回調函數之外，ES6還提供了新的方法，即Promise：

const gd = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    let name = 2;
    resolve(name)
  })
});

gd.then((data)=>{
  console.log(data);
});

當然Promise還有一種用法，可以直接對異步方法操作：

function get_data(resolve) {
  setTimeout(()=> {
    let name = 'sa';
    resolve(name)
  }, 1000)
}

const pd = new Promise(get_data)
pd.then((data)=>{
  console.log(data)
})

講完了Promise，我們來看一下Koa必備的兩個ES7語法，async和await。

async

用法很簡單，在普通方法前加上"async"即可：

/*
@Date: 2019/9/7 21:05  @Author: Asen Wang
@Contact Email: [email protected]
@content:
*/
async function f() {
  return 'this'
}

console.log(f());

對於普通方法"f"，前面加了async標識之後，會成爲一個異步方法，打印：

Promise { 'this' }

那麼怎麼拿到異步方法裏面的這個數據呢？

我們可以使用前文的：

async function f() {
  return 'this'
}

const gd = f()
gd.then((data)=>{
  console.log(data);
})

還可以使用await來得到我們的數據：

async function f() {
  return 'this'
}

async function gd() {
  const a = await f()
  console.log(a);
}

gd()

await,即async wait，可以把異步方法編程同步方法來執行，處理起來十分清晰。

這些在Koa中都是十分經常使用的方法。