Question

我正在通过JSONP发出API请求，以避免跨域错误。我想将响应存储在一个闭包中的变量（一个函数表达式“module”）中，该变量可以通过两个“公共方法”访问。

其中一个方法module.store是API响应使用的回调。另一种方法使用API响应的内容更新p标记。

点击“提交”以启动API请求后，我知道回调已成功调用，因为我可以在它消失之前简单地看到更新后的显示。

我认为一旦函数退出，我必须丢失响应，但是闭包应该仍然能够访问私有变量。

如果我从浏览器中调用requestJSONP（），它就可以工作。

我无法在JS小提琴中重新创建该问题，因为它不喜欢JSONP请求。

HTML：

<body>
<header>Wikipedia Viewer</header>
<section>
    <div class="container">
        <p>default text</p>
        <form>
            <button>Submit</button>
        </form>
    </div>
</section>
</body>

JS：

document.addEventListener('DOMContentLoaded', addListenerToButton);

//callback for DOM load which adds a click event on the submit button
function addListenerToButton() {

var button = document.getElementsByTagName("button")[0];

button.addEventListener("click", requestJSONP); 
console.log("addListenerToButton");
};

//advoids cross browser origin error
function requestJSONP(searchTerm) {
    //dynamically create a script tag
    var scriptTag = document.createElement("script");
    //set url 
    scriptTag.src = "https://en.wikipedia.org/w/api.php?action=opensearch&search=covfefe&limit=10&namespace=0&format=json&callback=test";
    //append tag to head element 
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
    console.log("got to JSONP");
};

function test(data){
        module.store(data);
}

//callback invoked when API sends reponse
var module = (function(){
    var storedValue = [];
console.log("got to module");
    return {
        store: function(val){
            storedValue.push(val);
            console.log("got to module.store");
            displayArray(); 
        },

        retrieve: function(){
            return storedValue;
        },

    }

}());

function displayArray(){
    var stored = module.retrieve(); 
    pTag = document.getElementsByTagName("p")[0];
    text = pTag.textContent = stored;

}

Answer 1

默认行为（至少在Chrome中）是刷新页面，这是清除存储的值。我已经覆盖了以下默认行为：

function saveText(event) {
    debugger
    event.preventDefault()
    var userInput = document.getElementsByTagName("input")[0].value;

    if (userInput === "") {
        alert("Please enter a search term")
        return 
    }
    requestJSONP(userInput);
    console.log("saveText");
};

JSONP响应未能存储在闭包中

1 个答案: