Promise 封装 jsonp

这里写一个 Promise 封装 jsonp 请求到 QQ 音乐数据的 demo。

function param(data) {
        let url = ''
        for (var k in data) {
            let value = data[k] !== undefined ? data[k] : ''
            url += '&' + k + '=' + encodeURIComponent(value)
        }
        return url ? url.substring(1) : ''
    }

    var url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';

    const data = {
        platform: 'h5',
        uin: 0,
        needNewCode: 1
    }

    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);

    function p(url) {
        let json;
        let s = document.createElement('script');
        s.src = url + '&jsonpCallback=fn';

        window.fn = function(data) {
            json = data;
        }
        //当script被插入文档中时，src中的资源就会开始加载
        document.body.appendChild(s);

        return new Promise((resolve, reject) => {
         
            s.onload = function(e) {
                resolve(json);
            }
            s.onerror = function() {
                reject(json);
            }
        });
    }

    p(url).then(data => {
        console.log(data);
    }).catch(err => {
        console.log(err)
    });

jsfiddle在线演示地址

---

• jsonp的原理介绍及Promise封装
• 简单的jsonp实现promise