我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue中异步数据获取方式(确保数据被获取)

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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;
        });
}

vue处理数据(同步,异步)问题简单记录

情况介绍

在这里插入图片描述

后端返回该地址的坐标经纬度,需要前端用百度地图api处理成详情地址

处理过程在遍历中直接引入

在这里插入图片描述

处理完数据后返回并绑定到el-table列表

通过打印发现getLocation()方法响应过慢,导致数据渲染时该字段为空

最终解决方法:new Promise()

抽离出处理数据的方法,用异步处理方式返回

在这里插入图片描述

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

所以。。。。。在外层调用时同样需要异步操作

在这里插入图片描述

因为获取详情地址的方法是逐条处理的,所以在调用的外层进行了遍历

。。。。。。。。最终解决问题

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue中异步数据获取方式(确保数据被获取)

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue中异步数据获取方式是什么

今天给大家介绍一下vue中异步数据获取方式是什么。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。vue中异步数据获取1、获取异步数据,通过async/await
2023-06-28

js如何获取异步函数数据

本篇内容介绍了“js如何获取异步函数数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!异步函数一般正常情况下,js中的函数是一个一个地按照顺
2023-07-05

layuitablechecked获取选中数据方式

这篇文章主要介绍了layuitablechecked获取选中数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

vue获取v-for异步数据dom的解决问题

这篇文章主要介绍了vue获取v-for异步数据dom的解决问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-24

vue获取v-for异步数据dom问题怎么解决

这篇文章主要讲解了“vue获取v-for异步数据dom问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue获取v-for异步数据dom问题怎么解决”吧!vue获取v-for异步数
2023-07-05

C sharp (#) 数据类型获取方式

这篇文章主要介绍了C sharp (#) 数据类型获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

JavaScript如何实现异步获取表单数据

这篇文章主要介绍JavaScript如何实现异步获取表单数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下在上一篇文章中
2023-06-15

Django中怎么利用ajax异步刷新获取数据

今天就跟大家聊聊有关Django中怎么利用ajax异步刷新获取数据,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。