Question

我当前正在尝试创建一项功能，该功能允许用户添加和删除自己喜欢的位置。最喜欢的位置都存储在数据库中，我正在答应获取并显示这些位置。此功能适用于页面加载时。但是，我希望每次用户添加或删除喜欢的位置后都再次进行获取，因此我将显示最新的数据信息。我认为我目前遇到的问题是我试图再次调用异步函数，但是因为在页面加载时未实现promise，所以promise已经解决了。有办法解决这个问题吗？

我正在使用的代码如下：

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));
}

Answer 1

您可以更改<div id="datails_container" > <form id="" action="" method="post"> <div id="genre_cont" class="theight" style="margin-top: 75px;"> <span>Genres</span> <select name="gnerenmbr" class="itemcount" id="gnerenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="gnerenmbr">genre(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> <input type="text" placeholder="input 4"> </div> <br> <div id="language_cont" class="theight"> <span>Languages</span> <select name="languagenmbr" class="itemcount" id="languagenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="languagenmbr">Language(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> </div> <br> <div id="country_cont" class="theight"> <span>Countries</span> <select name="countrynmbr" class="itemcount" id="countrynmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="countrynmbr">country(ies):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> <button id="detsubmitter" type="submit">ADD details</button> </form> </div>变量以在每次调用它时返回一个新的Promise实例。

此外，除非您有理由，否则我建议您删除setTimeout？

像这样：

getFavAddress

，然后将其更新为：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);

解决承诺后如何再次使用承诺

1 个答案: