async await的簡單例子

需求：
在新聞詳情頁面的中部渲染當前新聞的內容，並在點擊“上一篇”“下一篇”時刷新新聞內容及上下篇標題
首版代碼：

getList(key) {
    //僅在首次加載新聞詳情時請求數據
    if(this.newsList.length===0) {
        this.$axios.get('/api/queryByPage',{
            params: {
                'page': "1",
                'pageSize': "100",
                'model': "news"
            }
        }).then(res=> {
            res.data.content.rows.forEach((vv, index)=> {
                let news = {};
                news.key = index;
                news.content = vv.content;
                news.title = vv.title;
                this.newsList.push(news);
            });
        })
    }
    this.news = this.newsList[key];
    this.preNews.key = key == 0 ? this.newsList.length - 1 : (key*1 - 1);
    this.nextNews.key = key == (this.newsList.length - 1) ? 0 : (key*1 + 1);
    this.preNews.title = this.newsList[this.preNews.key].title;
    this.nextNews.title = this.newsList[this.nextNews.key].title;
}

結果報錯，因爲axios是異步，導致後面的代碼中newsList爲空，出現undefined型的錯誤
修改後：

getList(key) {
    //僅在首次加載新聞詳情時請求數據
    if(this.newsList.length===0) {
        this.$axios.get('/api/queryByPage',{
            params: {
                'page': "1",
                'pageSize': "100",
                'model': "news"
            }
        }).then(res=> {
            res.data.content.rows.forEach((vv, index)=> {
                let news = {};
                news.key = index;
                news.content = vv.content;
                news.title = vv.title;
                this.newsList.push(news);
            });
            this.news = this.newsList[key];
            this.preNews.key = key == 0 ? this.newsList.length - 1 : (key*1 - 1);
            this.nextNews.key = key == (this.newsList.length - 1) ? 0 : (key*1 + 1);
            this.preNews.title = this.newsList[this.preNews.key].title;
            this.nextNews.title = this.newsList[this.nextNews.key].title;
        })
    } else {
        this.news = this.newsList[key];
        this.preNews.key = key == 0 ? this.newsList.length - 1 : (key*1 - 1);
        this.nextNews.key = key == (this.newsList.length - 1) ? 0 : (key*1 + 1);
        this.preNews.title = this.newsList[this.preNews.key].title;
        this.nextNews.title = this.newsList[this.nextNews.key].title;
    }
}

這樣又有多餘代碼，要是異步請求的時候能卡在那一步就好了，於是突然想起之前看過的async await的介紹了
使用async await後的代碼，比起第一版只增加了async和await字段：

async getList(key) {
    //僅在首次加載新聞詳情時請求數據
    if(this.newsList.length===0) {
        await this.$axios.get('/api/queryByPage',{
            params: {
                'page': "1",
                'pageSize': "100",
                'model': "news"
            }
        }).then(res=> {
            res.data.content.rows.forEach((vv, index)=> {
                let news = {};
                news.key = index;
                news.content = vv.content;
                news.title = vv.title;
                this.newsList.push(news);
            });
        })
    }
    this.news = this.newsList[key];
    this.preNews.key = key == 0 ? this.newsList.length - 1 : (key*1 - 1);
    this.nextNews.key = key == (this.newsList.length - 1) ? 0 : (key*1 + 1);
    this.preNews.title = this.newsList[this.preNews.key].title;
    this.nextNews.title = this.newsList[this.nextNews.key].title;
}

果然還是要在實踐中加深理解
另：await 後必須是Promise對象，不然會不等待，直接執行後面的