使用原生 JavaScript 存储来自 JSONP 请求的响应答案

【问题标题】：Storing responses from JSONP request with vanilla JavaScript使用原生 JavaScript 存储来自 JSONP 请求的响应
【发布时间】：2016-10-28 08:43:03
【问题描述】：

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

我正在尝试将来自 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 对象需要分配给一个全局变量。我尝试了不同的方法来做到这一点，但似乎无法让它发挥作用。请帮忙。

【问题讨论】：

请在您的问题中包含来源。指向异地资源的链接容易腐烂。
@Tibrogargan 我不确定我理解您所说的“来源”是什么意思。 api的源url？
您已将其包含在 IMO 中；他可能是指已经存在的源代码......
您在问题中包含的代码不会将任何内容存储到新对象中（“对象”假设是 JavaScript 对象，而不是 HTML 元素）。
没关系。想多了。我猜你只需要创建一个全局变量

标签： javascript jsonp

【解决方案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;
}

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

【讨论】：

这行得通。我现在可以通过 jsonpData[0].quoteText 访问对象属性的值；谢谢！
...但问题是您永远不知道何时收到响应，并且当您查找时数组可能仍然是空的。

【解决方案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 - 如果数据尚未加载，回调将等待。

【讨论】：