问答

vue异步请求问题

作者:admin 2021-05-14 我要评论

这个swiperList是异步获取的,jsCallBack想获取它的值获取不到,怎么解决呢 ### 1、把 window.jsCallBack = this.jsCallBack 放到异步获得swiperList数据后,再...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

这个swiperList是异步获取的,jsCallBack想获取它的值获取不到,怎么解决呢
image.png

###

1、把 window.jsCallBack = this.jsCallBack 放到异步获得swiperList数据后,再去绑定和执行jsCallBack()。
2、如果期间就有触发jsCallBack的需求,建议另外加一个弹窗提示“组件加载中”之类的。

###

可以使用promise,写法如下

jsCallBack() {
    return new Promise((resolve, reject) => {
        // jsCallBack 逻辑, 当你获取到swiperList的值的时候resolve(data)
        ..... // 这里执行异步获取swiperList逻辑,例如
        getSwiperList().then(res => {
            ...
            resolve(data)
        })
    })
}

在mounted使用

jsCallBack().then(res => {
    window.jsCallBack = res
})
###

要看 jsCallBack 调用的时机。如果是异步请求结束之后应该是可以获取到值的。

###

怀疑是this 作用域问题,jsCallBack 方法里面打印下 this, 看看是什么?

###

可以试试使用 async 和 await,而且我看你将 jsCallBack 挂载在 window 上然后在调用,里面的 this 难道不会指向 window 而不再是指向 vue 组件实例吗?,或许应该 bind 一下吧

async mounted() {
  window.addEventLisiter('scroll', this.handleScroll);
  // 假设 getSwiperList 是异步获取swiperList的函数,可以将其包装成Promise 然后 await
  await this.getSwiperList();
  this.jsCallBack();
}

或者你 watch 一下 swiperList,当它的 length 大于 0 的进行 jsCallBack 的调用

###
mounted() {
    //方式1
    new Promise((resolve, reject) => {
        getSwiperList().then(res => {//获取swiperList的异步操作成功
            return resolve(res)
        })
    }).then(res => {
       //获取swiperList的值进行处理
    });
    
    //方式2
    new Promise
    .all([getSwiperList()])
    .then(function(results){
        //获取swiperList的异步操作成功之后的回调函数,在此处可以获取到swiperList的值。
    });
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器