快捷導(dǎo)航

vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)

更新時(shí)間：2022年01月24日 10:57:36 作者：二水你要努力啊

這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中異步數(shù)據(jù)獲取

1、獲取異步數(shù)據(jù)，通過async/await限制

import { fetchList } from '@/api/article'
//在created中即開始獲取
created() {
? ? this.getList()
}
methods：{
?? ?async getList() {
? ? ? this.listLoading = true
? ? ??
? ? ? //ES6寫法，與then方法鏈?zhǔn)秸{(diào)用相同，但比較簡(jiǎn)潔直觀
? ? ? //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的時(shí)候，才會(huì)阻塞之后的同步代碼，由上述eg可以印證

tips:

async函數(shù)也會(huì)立即返回一個(gè)promise對(duì)象

2、將一個(gè)方法的返回值

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

methods:{
?? ? getProfile(id) {
?? ? ? ? ?let query = {
?? ? ? ? ? ?aid: id
?? ? ? ? ?};
?? ? ? ? ?//返回一個(gè)promise對(duì)象
?? ? ? ? ?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值的時(shí)候，再打開彈窗
? ? ? ? this.getProfile(aid).then(() => {
? ? ? ? ? this.dialogVisible3 = true;
? ? ? ? });
}