假如我們在Vue的勾子函數里created放了2個回調函數

created() {this.initLinkGruopList()this.getList()},// 第一次獲取鏈接分類列表數據initLinkGruopList() {this.urlmethod(this.url.linkManage.clasList_link, null).then(res => {this.linkGroupData = [...res.data]this.rootLinkId = this.activeLinkId = res.data[0].idthis.activeLinkName = res.data[0].namefor (let i = 0; i < 100000; i++) {console.log(i)if (i == 100000 - 1) {alert('over')}}}).catch(err => {console.log('err', err)})},getList() {this.loading = trueconst reqPara = {data: {pageIndex: this.pagination.currentPage,pageSize: this.pagination.pageSize,clasId: this.activeLinkId}}// const response = await this.getLinkGruopList()this.urlmethod(this.url.linkManage.list_link, reqPara).then(res => {this.data = [...res.data.list]this.data.forEach(item => {this.linkGroupData.forEach(element => {if (item.clasId === element.id) {item.clasName = element.name}})})this.pagination.total = res.data.recordTotalthis.loading = false}).catch(err => {console.log('err', err)this.loading = false})},

熟悉執行棧 回調函數 和異步的同學(不熟悉的可以看我前期博客，有專門講這一塊)，會知道上面例子的執行順序，先執行initLinkGruopList()，因為這個函數是用了axios異步請求，所以返回給主線程一個回調標記，第二個getList開始執行，第二個也是返回給主線程一個回調標記，這時主線程沒有了任務隊列，于是看這兩個回調函數哪個跑的快,就先執行哪個。

問題來了，假如我只想第一個先執行，等拿到了它的結果，再執行第二個呢？

async created() {await this.initLinkGruopList()this.getList()},// 第一次獲取鏈接分類列表數據initLinkGruopList() {return new Promise((resolve, reject) => {this.urlmethod(this.url.linkManage.clasList_link, null).then(res => {this.linkGroupData = [...res.data]this.rootLinkId = this.activeLinkId = res.data[0].idthis.activeLinkName = res.data[0].namefor (let i = 0; i < 100000; i++) {console.log(i)if (i == 100000 - 1) {resolve()}}}).catch(err => {console.log('err', err)})})},async getList() {this.loading = trueconst reqPara = {data: {pageIndex: this.pagination.currentPage,pageSize: this.pagination.pageSize,clasId: this.activeLinkId}}// const response = await this.getLinkGruopList()this.urlmethod(this.url.linkManage.list_link, reqPara).then(res => {this.data = [...res.data.list]this.data.forEach(item => {this.linkGroupData.forEach(element => {if (item.clasId === element.id) {item.clasName = element.name}})})this.pagination.total = res.data.recordTotalthis.loading = false}).catch(err => {console.log('err', err)this.loading = false})

用async/await+promise就搞定啦，為了效果區別明顯，我故意for里循環了100000次。

總結

以上是生活随笔為你收集整理的Vue created() 里同步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。