vue 中的 async await 異步 等待 按順序執行

async/await場景:

這是一個用同步的思維來解決異步問題的方案，當前端接口調用需要等到接口返回值以后渲染頁面時。

async

async的用法，它作為一個關鍵字放到函數前面，用於表示函數是一個異步函數，因為async就是異步的意思， 異步函數也就意味着該函數的執行不會阻塞后面代碼的執行，async 函數返回的是一個promise 對象，可以使用then方法添加回調函數。當函數執行的時候，一旦遇到await就會先返回，等到異步操作完成，再接着執行函數體內后面的語句。

await

await的含義為等待。意思就是代碼需要等待await后面的函數運行完並且有了返回結果之后，才繼續執行下面的代碼。這正是同步的效果。

 

簡單案例：

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 的執行也沒有阻塞后面代碼的執行，和 我們剛才說的一致。

 

await 是等待的意思，那么它等待什么呢，它后面跟着什么呢？其實它后面可以放任何表達式，不過我們更多的是放一個返回promise 對象的表達式。

注意 await 關鍵字只能放到async 函數里面

例子：現在寫一個函數，讓它返回promise 對象，該函數的作用是2s 之后讓數值乘以2:

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

就這一個函數，我們可能看不出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); // 220
}

現在調用testResult 函數，6秒后，控制台輸出220, 我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調地域了。

Vue項目案例

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

按順序執行函數：

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

上面會按順序執行：省 市 縣

實例：

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
      }
    }
}

可以看到打印出來的是空數組。因為這時候調用接口返回的數據還沒有被賦值。

修改下：

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
      }
    }
}

刷新頁面，可以看到打印出來的是已經被賦值的數組。