vue异步请求问题

Question

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

Answer 1

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

Answer 2

可以使用promise，写法如下

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

在mounted使用

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

Answer 3

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

Answer 4

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

Answer 5

可以试试使用 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 的调用

Answer 6

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