vue异步请求问题

这个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的值。
    });
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注