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

目录
  • vue中异步数据获取
    • 1、获取异步数据，通过async/await限制
    • 2、将一个方法的返回值
  • vue处理数据（同步，异步）问题简单记录
    • 情况介绍
    • 最终解决方法：new Promise()

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()

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

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

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

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vuex数据异步造成初始化的时候没值报错问题

    当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错: 1.通过watch

  • vue异步请求数据重新渲染方式

    目录 vue异步请求数据重新渲染 下面介绍一种方法解决 自定义组件异步获取数据重新渲染 视图层 逻辑层 vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 export default {         name: "pic",         created() {            this.getList();         },         data(){             return{num:[]}         }

  • Vue3异步数据加载组件suspense的使用方法

    目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这

  • 浅谈vue异步数据影响页面渲染

    今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染

  • vue 解决异步数据更新问题

    问题 记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7

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

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

    目录 vue中异步数据获取 1.获取异步数据,通过async/await限制 2.将一个方法的返回值 vue处理数据(同步,异步)问题简单记录 情况介绍 最终解决方法:new Promise() vue中异步数据获取 1.获取异步数据,通过async/await限制 import { fetchList } from '@/api/article' //在created中即开始获取 created() {     this.getList() } methods:{     async getL

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • Vue 中使用vue2-highcharts实现曲线数据展示的方法

    1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • Vue中对拿到的数据进行A-Z排序的实例

    最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下 我拿到的数据是这样的,我想让他按照A-Z顺序排列 1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列. computed:{ sortList(){ return this.singers.sort((a, b) => { return a['Findex'].localeCompare(b['Findex']) }) } }, 然后 使用v-for

  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • vue中设置滚动条方式

    目录 vue设置滚动条 vue如何在div中设置滚动条呢? vue控制滚动条 vue设置滚动条 vue如何在div中设置滚动条呢? 首先需要写一下css样式 <div     :style="{'max-height': this.timeLineHeight + 'px' }"     style="overflow-y:scroll;"  >              </div> 在这个div中,放的是你写的前端代码.它是可以滚动的.

  • vue中的Object.freeze() 优化数据方式

    目录 来看他的定义 Object.freeze()存在的意义(应用场景)是什么呢? 举个例子 在看一些他人的例子 冻结对象 冻结数组 freeze翻译成汉语有冻结的意思使用 ,Object.freeze()是ES5新增的特性,可以冻结一个对象,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化. 来看他的定义 Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性.可配置性.可

  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    目录 Vue使用mock模拟数据 Vue使用mock数据的几种方式 方式一:借助mockjs插件实现本地mock数据 方式二:在public文件夹放mock数据(无需使用mockjs插件) 方式三:前端本地启动一个nodejs服务 Vue使用mock模拟数据 开发阶段,为了提高效率,需要提前Mock减少代码冗余,灵活插拔减少沟通,减少接口联调时间 1.编辑器安装JSON5扩展,(采用json5格式来让json格式可以存在注释) 2.新建mock文件夹 /userInfo.json5 文件 moc

随机推荐