如何在原生 javascript Promise 中包裝 jsonP 回調？

Question

我正在使用本機 Promise 將一堆 XmlHttpRequests 組合成一個結果，我想我可以正常工作，請參閱http://jsfiddle.net/pjs06hdo/ （對 flickr api 的隨機調用，請參閱控制台了解實際發生的情況按什么順序）

可能有更短的實現，但通過這段代碼，我可以理解發生了什么。

但是后來出現了愚蠢的 JSONP :-( 事實證明，實際的目標站點不允許跨站點請求，我必須使用提供的 jsonP 端點（再次用 flickr 模擬）而在這里我被卡住了：那個愚蠢的全局回調不符合我對Promise基本理解

我認為該解決方案與如何將現有回調 API 轉換為承諾中的解釋有關？ .

我試圖實現這一點，但它只能部分工作： http : //jsfiddle.net/b33bj9k1/沒有實際輸出，只有控制台消息，抱歉。 但是在那里你可以看到有三個調用來創建承諾，但resolve()和jsonFlickrApiAsync()只被調用一次。

使用 Promise 處理 jsonP 回調的正確方法是什么，以便我可以像上面的 XmlHttpRequest 版本那樣使用Promise.all()來處理結果？

請不要使用 jQuery - 我想了解到底發生了什么

Answer 1

這不是 promises 的問題，這是JSONP的問題。 由於它使用全局回調，因此您需要為每個請求使用不同的回調 - 具有不同的名稱。 對於 Flickr，這意味着您必須使用他們的jsoncallback url 參數。 參數名稱可能因您的實際端點而異。

---

但是，您對 Promise 的使用確實很奇怪。 通常，您會為每個請求使用一個 promise 來表示該請求的結果。 你故意只創建一個全局承諾，這是行不通的。

function loadJSONP(url, parameter="callback") {
    var prop = "loadJSONP.back" + loadJSONP.counter++;
    var script = document.createElement("script");
    function withCleanUp(r) {
        return (x) => {
            loadJSONP[prop] = null;
            document.head.removeChild(script);
            r(x);
        }
    }
    return new Promise((resolve, reject) => {
        loadJSONP[prop] = withCleanUp(resolve);
        script.onerror = withCleanUp(reject);
        // setTimeout(script.onerror, 5000); might be advisable

        script.src = url+"&"+parameter+"="+prop;
        document.head.appendChild(script);
    });
}
loadJSONP.counter = 0;