Как снова использовать обещание после того, как оно уже было разрешено - PullRequest
Новая
       83

Как снова использовать обещание после того, как оно уже было разрешено

0 голосов
/ 13 июля 2020

В настоящее время я пытаюсь создать функцию, которая позволяет пользователям добавлять и удалять свои любимые места. Избранные местоположения хранятся в базе данных, и я использую обещание для извлечения и отображения местоположений. Это отлично работает, когда страница загружается. Однако я хочу, чтобы выборка выполнялась снова после каждого добавления или удаления пользователем избранного местоположения, и поэтому я буду отображать наиболее актуальную информацию. Я думаю, что проблема, с которой я столкнулся на данный момент, заключается в том, что я пытаюсь снова вызвать функцию asyn c, но поскольку обещание уже выполнено, когда страница загружается, выборка не выполняется. Есть ли способ обойти это?

Мой код, который я использую, выглядит так: 

var current_user = context.current_user;
var favAddressSection = document.getElementById('favouriteAddressSection');
var locations = []

const getFavAddresses = new Promise((resolve, reject) => {
  setTimeout(() =>{
    if (current_user == 0){
      resolve(null)
    }
    fetch("api/favaddress/")
      .then(response => {
          return response.json();
      })
      .then(data => {
          for (var i =0; i < data.length; i++){
            locations.push(data[i])
          }
          resolve(locations)
      })
      .catch(error => {
        reject(console.log(error))
      })
    })
  }, 1);


async function getFavAddressAwait(){

  const addresses = await getFavAddresses;
  var innerHTML = " "; 
  for (var i = 0; i < addresses.length; i++){
    innerHTML += '<div class="favAddressElement"> <h4>' + addresses[i].name + '</h4> <button class="favAddressButton"> <img src="../static/images/favAddress.png"> </button> <button onClick=deleteLocation(' + addresses[i].id + ')>Remove</button></div>'
  }
  if (addresses.length < 6){
    innerHTML += '<div class="favAddressElement"> <h5> Add Favourite </h5> <button id="addAddress" class="favAddressButton" onClick=showForm()> <img src="../static/images/add_fav.png"/> </button> </div> '
  }
  favAddressSection.innerHTML = innerHTML;
}

getFavAddressAwait();


function deleteLocation(primarykey){
  axios.delete(`http://127.0.0.1:8000/api/favaddress/destroy/${primarykey}`)
    .then(res => console.log(res))
    .then(getFavAddressAwait())
    .catch(err => console.log(err));
}

1 Ответ

1 голос
/ 13 июля 2020

Вы можете изменить свою getFavAddress переменную, чтобы возвращать новый экземпляр обещания каждый раз, когда он вызывается.

Кроме того, я бы рекомендовал удалить ваш setTimeout, если у вас нет для этого причины?

Примерно так: 

const getFavAddresses = () => new Promise((resolve, reject) => {
    if (current_user == 0){
        resolve(null);
    }
    fetch("api/favaddress/")
        .then(response => {
            return response.json();
        })
        .then(data => {
            for (var i =0; i < data.length; i++){
                locations.push(data[i]);
            }
            resolve(locations);
        })
        .catch(error => {
            reject(console.log(error));
        })
    ;
}, 1);

, а затем просто обновите свой вызов: await getFavAddress()

...