欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年01月24日 10:57:36   作者:二水你要努力啊  
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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)用相同,但比較簡潔直觀
? ? ? //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;
? ? ? ? });
}

vue處理數(shù)據(jù)(同步,異步)問題簡單記錄

情況介紹

在這里插入圖片描述

后端返回該地址的坐標(biāo)經(jīng)緯度,需要前端用百度地圖api處理成詳情地址

處理過程在遍歷中直接引入

在這里插入圖片描述

處理完數(shù)據(jù)后返回并綁定到el-table列表

通過打印發(fā)現(xiàn)getLocation()方法響應(yīng)過慢,導(dǎo)致數(shù)據(jù)渲染時該字段為空

最終解決方法:new Promise()

抽離出處理數(shù)據(jù)的方法,用異步處理方式返回

在這里插入圖片描述

返回的之中存在空值。。。

所以。。。。。在外層調(diào)用時同樣需要異步操作

在這里插入圖片描述

因為獲取詳情地址的方法是逐條處理的,所以在調(diào)用的外層進行了遍歷

。。。。。。。。最終解決問題

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中vuex與pinia的踩坑筆記記錄

    vue3中vuex與pinia的踩坑筆記記錄

    Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue3中vuex與pinia踩坑的相關(guān)資料,需要的朋友可以參考下
    2021-12-12
  • vue遞歸實現(xiàn)三級菜單

    vue遞歸實現(xiàn)三級菜單

    這篇文章主要為大家詳細(xì)介紹了vue遞歸實現(xiàn)三級菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決

    vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決

    這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue3錨點定位多種方法詳解

    vue3錨點定位多種方法詳解

    這篇文章主要介紹了vue3的錨點定位多種方法,需要的朋友可以參考下
    2024-01-01
  • 解決vue-router 嵌套路由沒反應(yīng)的問題

    解決vue-router 嵌套路由沒反應(yīng)的問題

    這篇文章主要介紹了解決vue-router 嵌套路由沒反應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 解決vue+elementui項目打包后樣式變化問題

    解決vue+elementui項目打包后樣式變化問題

    這篇文章主要介紹了解決vue+elementui項目打包后樣式變化問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue組件化學(xué)習(xí)之scoped詳解

    Vue組件化學(xué)習(xí)之scoped詳解

    這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • Vant中List組件immediate-check=false無效的解決

    Vant中List組件immediate-check=false無效的解決

    這篇文章主要介紹了Vant中List組件immediate-check=false無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue環(huán)形進度條組件實例應(yīng)用

    vue環(huán)形進度條組件實例應(yīng)用

    在本文中我們給大家分享了關(guān)于vue環(huán)形進度條組件的使用方法以及實例代碼,需要的朋友們跟著測試下吧。
    2018-10-10
  • 繪制flowable?流程圖的Vue?庫使用詳解

    繪制flowable?流程圖的Vue?庫使用詳解

    這篇文章主要為大家介紹了繪制flowable?流程圖的Vue?庫使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論