import { fetchList } from '@/api/article'
//在created中即開始獲取
created() {
? ? this.getList()
}
methods：{
?? ?async getList() {
? ? ? this.listLoading = true
? ? ??
? ? ? //ES6寫法，與then方法鏈?zhǔn)秸{(diào)用相同，但比較簡潔直觀
? ? ? //const的寫法，保證原數(shù)據(jù)不被更改
? ? ? const { data } = await fetchList(this.listQuery)
? ? ??
? ? ? //被await阻塞的代碼
? ? ? const items = data.items
? ? ? this.list = items.map(v => {
? ? ? })
? ? ? this.listLoading = false
? ? },
}

eg1:

?? ?changeA(){
? ? ? return ?3
? ? },
? ? async getAsync(){
? ? ? let a = 1
? ? ? a = await this.changeA()
? ? ? console.log(a) ? //打印結(jié)果為3
? ? },
? ? //changeA中沒有異步操作，程序從上往下執(zhí)行

eg2:

? ? async changeA(){
? ? ?let a ?=22
? ? ?await ?setTimeout(()=>{
? ? ? ?console.log('異步中')
? ? ? ?a = 33
? ? ?})
? ? ?console.log('異步結(jié)果')
? ? ?return a
? ? },
? ? async getAsync(){
? ? ? let a = 1
? ? ? await this.changeA()
? ? ? console.log(a) ?
? ? },
? ? ?//打印結(jié)果為?
? ? ?異步結(jié)果
? ? ?22 ? ? ? ? ? ? //a的結(jié)果
? ? ?異步中
? ? ?//結(jié)論await并未阻塞異步的代碼

eg3:

?? ?changeA(){
? ? ? return new Promise((resolve)=>{
? ? ? ? setTimeout(()=>{
? ? ? ? ? console.log('異步')
? ? ? ? ? resolve()
? ? ? ? },2000)
? ? ? })
? ? },
? ? async getAsync(){
? ? ? await this.changeA()
? ? ? console.log('同步') ??
? ? },
? ? //兩秒后打印結(jié)果?
? ? 異步
? ? 同步
? ? //結(jié)論：成功阻塞代碼

eg4:

?? ?changeA(){
? ? ? return new Promise((resolve)=>{
? ? ? ? setTimeout(()=>{
? ? ? ? ? console.log('異步')
? ? ? ? ? resolve()
? ? ? ? },2000)
? ? ? })
? ? },
? ? async getAsync(){
? ? ? this.changeA()
? ? ? console.log('同步') ??
? ? },
? ? //先打印同步，兩秒后打印異步

總結(jié)：當(dāng)await后面跟的函數(shù)存在異步且返回promise的時候，才會阻塞之后的同步代碼，由上述eg可以印證

tips:

async函數(shù)也會立即返回一個promise對象

2、將一個方法的返回值

返回promise函數(shù)，可以在該方法結(jié)束后，使用鏈?zhǔn)浇Y(jié)構(gòu)

methods:{
?? ? getProfile(id) {
?? ? ? ? ?let query = {
?? ? ? ? ? ?aid: id
?? ? ? ? ?};
?? ? ? ? ?//返回一個promise對象
?? ? ? ? ?return new Promise(async resolve => {
?? ? ? ? ? ?? ? ?const {data} = await api.getProfileList(query)
?? ? ? ? ? ?? ? ?//被await阻塞的同步代碼
?? ? ? ? ? ? ?this.profileList = data;
?? ? ? ? ? ? ?this.graphical(this.dataX, this.dataY);
?? ? ? ? ? ? ?resolve();
?? ? ? ? ?});
?? ? ? ?},
?//當(dāng)?shù)玫劫x值的時候，再打開彈窗
? ? ? ? this.getProfile(aid).then(() => {
? ? ? ? ? this.dialogVisible3 = true;
? ? ? ? });
}