Question

我正在尝试使以下代码正常工作。第一个函数（prepareNewCard）在网页中创建了一个div，因此我使用一个保证来确保仅在创建div后才执行下一个函数（getSearchTerm）。 getSearchTerm用于与先前创建的div中的搜索词进行解析。为了测试这一点，我正在尝试console.log搜索词。但是，搜索项记录为空，但是函数中的console.log（“ here”）可以正常工作。在我看来，承诺在.onclick之前就已解决，但我不知道这种情况会如何发生。

这是这两个功能的代码

function prepareNewCard() {
    //Most of this not relevant to the question, creating the div
    var currentCard = document.createElement("div");
    currentCard.className += " card";
    currentCard.className += " currentCard";
    var currentSearch = document.createElement("input");
    currentSearch.className += " searchInput";
    currentSearch.placeholder += "Enter a search term...";
    var searchButton = document.createElement("button");
    searchButton.className += " searchButton";

    //Create the card to be searched                                                    
    currentCard.appendChild(currentSearch);
    currentCard.appendChild(searchButton);

    //Add this card to the main div                                                     
    const searchResultsArea = document.getElementById("searchResults");

    //The promise being returned
    return new Promise(function(resolve, reject) {
            currentCards = document.getElementById(".currentCard");
            if (currentCards === null) {
                searchResultsArea.appendChild(currentCard);
                resolve(currentCard);
            } else {
                reject('Use your current card before creating a new one');
            }
        });
}

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    currentSearchButton.onclick = function() {
        return new Promise(function(resolve, reject) {
                var currentSearchInput = currentSearchBar.value;
                if (currentSearchInput !== null) {
                    resolve(currentSearchInput);
                    console.log("here");
                } else {
                    reject("Please input search term");
                }
            });
    }
}

调用这些函数的代码在这里

    newCardButton.onclick = function() {
        prepareNewCard()
        .then(function(currentCard) {
                getSearchTerm(currentCard)
                .then(function(searchTerm) {
                     console.log(searchTerm)
                })  
                .catch(function(error) {
                    console.log(error)
                });
        })
        .catch(function(error) {
                console.log(error);
        });
    }

使用JavaScript Promise不可能吗？我已经尝试了一些用于promise .then功能的配置，但似乎都没有用。预先感谢！

编辑：

这是另一个没有承诺的版本。

function prepareNewCard() {
    //Same code above to create div
    const searchResultsArea = document.getElementById("searchResults");
    searchResultsArea.appendChild(currentCard);
    return currentCard;
}

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    currentSearchButton.onclick = function() {
    console.log("TEST");
    return currentSearchBar.value;
}

    let currentCard;
    let currentSearchTerm;
    newCardButton.onclick = function() {
    currentCard = prepareNewCard();
    currentSearchTerm = getSearchTerm(currentCard);
    console.log(currentSearchTerm);
}

上述代码的控制台如下：

单击newcardbutton并立即获得“ undefined”，以响应console.log（currentSearchTerm）。然后，当在动态创建的div控制台中单击searchButton时，将打印“ TEST”，而不显示其他任何内容。

Answer 1

问题是您要从onclick处理函数返回一个诺言，而不是从getSearchTerm返回一个诺言，并且它不返回任何内容，因此应该是：

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    return new Promise(function(resolve, reject) {
          currentSearchButton.onclick = function() {
                var currentSearchInput = currentSearchBar.value;
                if (currentSearchInput !== null) {
                    resolve(currentSearchInput);
                    console.log("here");
                } else {
                    reject("Please input search term");
                }
          }
     });
}

另外，由于同步是同步的，因此完全不需要从prepareNewCard返回承诺，而只需返回值或抛出错误：

currentCards = document.getElementById(".currentCard");
if (currentCards === null) {
    searchResultsArea.appendChild(currentCard);
    return currentCard;
} else {
    throw 'Use your current card before creating a new one';
}

在onclick中解决承诺

1 个答案: