async/await場(chǎng)景:

這是一個(gè)用同步的思維來解決異步問題的方案，當(dāng)前端接口調(diào)用需要等到接口返回值以后渲染頁面時(shí)。

async

async的用法，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，因?yàn)閍sync就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行，async 函數(shù)返回的是一個(gè)promise 對(duì)象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

await

await的含義為等待。意思就是代碼需要等待await后面的函數(shù)運(yùn)行完并且有了返回結(jié)果之后，才繼續(xù)執(zhí)行下面的代碼。這正是同步的效果。

簡(jiǎn)單案例：

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

1013082-20180205150941373-8971393.png

原來async 函數(shù)返回的是一個(gè)promise 對(duì)象，如果要獲取到promise 返回值，我們應(yīng)該用then 方法， 繼續(xù)修改代碼:

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

1013082-20180205151306873-401823311.png

我們獲取到了"hello world', 同時(shí)timeout 的執(zhí)行也沒有阻塞后面代碼的執(zhí)行，和 我們剛才說的一致。

await是等待的意思，那么它等待什么呢，它后面跟著什么呢？其實(shí)它后面可以放任何表達(dá)式，不過我們更多的是放一個(gè)返回promise 對(duì)象的表達(dá)式。

注意 await 關(guān)鍵字只能放到async 函數(shù)里面

例子：現(xiàn)在寫一個(gè)函數(shù)，讓它返回promise 對(duì)象，該函數(shù)的作用是2s 之后讓數(shù)值乘以2:

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

就這一個(gè)函數(shù)，我們可能看不出async/await 的作用，如果我們要計(jì)算3個(gè)數(shù)的值，然后把得到的值進(jìn)行輸出呢？

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

現(xiàn)在調(diào)用testResult 函數(shù)，6秒后，控制臺(tái)輸出220, 我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調(diào)地域了。

Vue項(xiàng)目案例：

async getTopicList() {
      let resp = await axios.get(`/topic`)
      if (resp.data.status === 1) {
        this.topicList = resp.data.data.data
      }
}

按順序執(zhí)行函數(shù)：

async created() {
    await this.province()
    await this.city()
    await this.country()
}

上面會(huì)按順序執(zhí)行：省 市 縣

實(shí)例：

data() {
    return {
        topicList: []
    }
},
created() {
    this.getTopicList()
    console.log(this.topicList)
},
methods: {
    async getTopicList() {
      let resp = await axios.get(`/topic`)
      if (resp.data.status === 1) {
        this.topicList = resp.data.data.data
      }
    }
}

可以看到打印出來的是空數(shù)組。因?yàn)檫@時(shí)候調(diào)用接口返回的數(shù)據(jù)還沒有被賦值。
修改下：

data() {
    return {
        topicList: []
    }
},
async created() {
    await this.getTopicList()
    console.log(this.topicList)
},
methods: {
    async getTopicList() {
      let resp = await axios.get(`/topic`)
      if (resp.data.status === 1) {
        this.topicList = resp.data.data.data
      }
    }
}

刷新頁面，可以看到打印出來的是已經(jīng)被賦值的數(shù)組。