如何从 Promise 返回值

Question

var seat;
var emp = db.collection('BookedTicketData').get().then((snapshot) => {
    snapshot.docs.forEach((doc) => {
        var data = doc.data()
        console.log(data.AllSeat);
        seat = data.AllSeat
    })
})

seat.forEach((val) => {
    for(i = 1; i<=37;i++){
        if(val == i){
            html += `
                <input type="checkbox" class="dn checkme" name="s-size" id="${j}"  value="${j}"/>
                <label for="${j}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${j}</label>
            `
        }
    }
})

document.getElementById('loader').innerHTML = html;

我已应用此代码从 firebase 获取座位的值，它是一个数组，我将这些值与循环匹配，但我在该函数之外未定义座位的值。

Answer 1

您可以尝试将您的逻辑移入then：

var emp = db.collection('BookedTicketData').get().then((snapshot) => {
  var seat;
  snapshot.docs.forEach((doc) => {
    var data = doc.data()
    console.log(data.AllSeat);
    seat = data.AllSeat
  })
  return seat;
}).then(seat => {
  seat.forEach((val) => {
    let html = ''
    for (i = 1; i <= 37; i++) {
      if (val == i) {
        html += `
                <input type="checkbox" class="dn checkme" name="s-size" id="${j}"  value="${j}"/>
                <label for="${j}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${j}</label>
            `
      }
    }
    document.getElementById('loader').innerHTML = html;
  })
})

Answer 2

使用 async await 语法来解决您的承诺。实际上，您的代码中发生的事情是座位。forEach 在座位被分配一个值之前运行，这就是它未定义的原因。像这样更改您的代码...

var seat;
var emp = await  db.collection('BookedTicketData').get(); 

确保在异步函数中使用 await，否则将无法正常工作。

我再次应用了此代码，但现在复选框无法选择

   var emp = db.collection('BookedTicketData').get().then((snapshot) => {
                                            snapshot.docs.forEach((doc) => {
                                                var data = doc.data()
                                                seat = data.AllSeat
                                            })
                                        }).then(() => {
                                            for (j = 1; j <= 37; j++) {

                                                html += `
                                                    <input type="checkbox" class="dn checkme" name="s-size" id="${j}"  value="${j}"/>
                                                    <label for="${j}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${j}</label>
                                                        `

                                        }


                                        document.getElementById('loader').innerHTML = html;


 emp.docs.forEach((doc) => {
                     var data = doc.data()
                     console.log(data.AllSeat);
                     seat = data.AllSeat
                   })


 this will work now

  seat.forEach((val) => {
                 for(i = 1; i<=37;i++){
                     if(val == i){
                               html += `
                          <input type="checkbox" class="dn checkme" name="s-size" id="${j}"  value="${j}"/>
               <label for="${j}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark grow">${j}</label>

                         `
                     }
                 }
       })
   document.getElementById('loader').innerHTML = html;