網站首頁 Vue 正文

vue中異步數據獲取方式(確保數據被獲取)_vue.js

作者：二水你要努力啊 ? 更新時間： 2022-04-06 Vue

vue中異步數據獲取

1、獲取異步數據，通過async/await限制?

import { fetchList } from '@/api/article'
//在created中即開始獲取
created() {
? ? this.getList()
}
methods：{
?? ?async getList() {
? ? ? this.listLoading = true
? ? ??
? ? ? //ES6寫法，與then方法鏈式調用相同，但比較簡潔直觀
? ? ? //const的寫法，保證原數據不被更改
? ? ? 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) ? //打印結果為3
? ? },
? ? //changeA中沒有異步操作，程序從上往下執行

eg2:

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

eg3:

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

eg4:

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

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

tips:

async函數也會立即返回一個promise對象

2、將一個方法的返回值

返回promise函數，可以在該方法結束后，使用鏈式結構

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();
?? ? ? ? ?});
?? ? ? ?},
?//當得到賦值的時候，再打開彈窗
? ? ? ? this.getProfile(aid).then(() => {
? ? ? ? ? this.dialogVisible3 = true;
? ? ? ? });
}