使用 Promise 传递参数 VUE

Question

我在传递值时遇到问题，then parameter但是当我console.log(url)返回一个值时

var x =""

export default{

firebase(){
return {
    menu : db.ref('menu')
}
},


    data(){
        return {
        menu : [],
        sampleVar : ""
        }

    },methods: {
        getURL(imageUri){
            var starsRef = sb.refFromURL('https://firebasestorage.googleapis.com/v0/b/hse-delights.appspot.com/o/'+imageUri);
             starsRef.getDownloadURL().then(function(url) {
                x = url;
                this.sampleVar = url;
                console.log(url);
            }) 
            return x;

        }
    }

}

即使我尝试了return this.sampleVar也无法获取该值，我是否缺少传递参数的东西？请帮忙，非常感谢

我的模板是

            <div class="menuList__item" v-for="food in menu">
                <div class="menuList__color pr">
                    <div class="menuList__img">
                        <img class="menuList__path" :src="getURL(food.mPath)">
                    </div>
                    <div class="menuList__details pr">
                        <strong class="menuList__name"> {{food.mName}} </strong>
                        <div class="menuList__description">{{food.mDesc}}</div>
                        <div class="pa menuList__price">P400.00</div>
                        <div class="pa menuList__category">Rice Dishes </div>
                    </div>
                </div>
            </div>

Answer 1

this在调用之前使用箭头函数或分配一个变量。回调函数上下文this中的 是进行 API 调用的对象，而不是 vue 组件。

所以：

getURL(imageUri){
        var self = this;
        var starsRef = sb.refFromURL('https://firebasestorage.googleapis.com/v0/b/hse-delights.appspot.com/o/'+imageUri);
         starsRef.getDownloadURL().then(function(url) {
            x = url;
            self.sampleVar = url;
            console.log(url);
        }) 
        return x;

    }

或者

getURL(imageUri){
        var starsRef = sb.refFromURL('https://firebasestorage.googleapis.com/v0/b/hse-delights.appspot.com/o/'+imageUri);
         starsRef.getDownloadURL().then( url => {
            x = url;
            this.sampleVar = url;
            console.log(url);
        }) 
        return x;

    }

不过，我更喜欢使用第二个选项，因为我喜欢箭头语法。

编辑：顺便说一句，当您x最后返回时，它实际上没有改变，因为这只发生在回调中。您可能最好重构代码，以便这x实际上是组件的属性并从模板访问其值（如果这是目标）。

编辑2：我现在明白了。您想要做的事情应该通过直接引用属性并在开始时加载 url 来完成。

我会在从 firebase 检索数据后执行此操作，如下所示（我假设您正在使用vuefire似乎是这种情况）：

firebase () {
  return {
    menu: {
      asObject: false,
      source: db.ref('menu'),
      readyCallback () {
        Promise.all(this.menu.map(
          food => sb.refFromURL('...' + food.mPath).getDownloadURL()
        )).then(urls => {
          this.menu = this.menu.map((food, index) => {
            food.imgURL = urls[index]
            return food
          })
        })
      }
    }
  }
}

然后，在您的 HTML 中，您只需引用：

<img class="menuList__path" :src="food.imgURL">