使用 vanilla JavaScript 存储来自 JSONP 请求的响应

Question

感谢您花时间阅读我的问题！

我正在尝试将来自 JSONP 请求的响应存储到一个新对象中，稍后我可以在向同一服务器发出另一个请求后访问该值。这样做的目的是允许用户滚动浏览以前请求的数据。

这是我的代码：

window.onload = getData;
function getData() {
    var script = document.createElement("script");
    script.src = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=displayData";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function displayData(response) {
    document.getElementById("quote").innerHTML = response.quoteText;
    document.getElementById("cite").innerHTML = response.quoteAuthor;
}

我认为 displayData 对象需要分配给全局变量。我尝试了不同的方法来做到这一点，但似乎无法让它发挥作用。请帮忙。

Answer 1

window.onload = getData;
function getData() {
    var script = document.createElement("script");
    script.src = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=displayData";
    document.getElementsByTagName("head")[0].appendChild(script);
}

var previousResponses = [];

function displayData(response) {
    previousResponses.push(response);
    document.getElementById("quote").innerHTML = response.quoteText;
    document.getElementById("cite").innerHTML = response.quoteAuthor;
}

现在您有一个包含所有先前响应的数组。

Answer 2

使用承诺：

var data = new Promise(function getData(resolve, reject) {
    window.setData = resolve;
    var script = document.createElement("script");
    script.src = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=setData";
    script.onerror = reject;
    document.getElementsByTagName("head")[0].appendChild(script);
});

你可以这样使用它：

window.onload = function displayData() {
    data.then(function(response) {
        document.getElementById("quote").innerHTML = response.quoteText;
        document.getElementById("cite").innerHTML = response.quoteAuthor;
    });
};

只需将 then 链接到 data，只要您愿意 - 如果数据尚未加载，回调将等待。

使用 vanilla JavaScript 存储来自 JSONP 请求的响应

Storing responses from JSONP request with vanilla JavaScript

javascript

jsonp