【JavaScript】封装一个jsonp函数

程序员通通

已于 2023-09-17 21:23:51 修改

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript jsonp 跨域

于 2019-04-04 11:12:47 首次发布

本文链接：https://blog.youkuaiyun.com/AC_greener/article/details/89016637

JavaScript 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种使用JSONP实现跨域请求的方法。通过创建script标签并利用回调函数接收服务器返回的数据，可以解决浏览器同源策略限制的问题。具体实现包括定义一个jsonp函数，该函数接受目标URL、参数及回调函数名作为输入，并返回一个Promise对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


function jsonp({url, params, callback}) {
  return new Promise ((resolve, reject) => {
    let script = document.createElement ('script');
    window[callback] = function (data) { //声明这个全局函数，script标签拿到数据时会自动执行这个函数
      resolve (data);
      document.body.remove (script);
    };
    params = {...params, callback};
    let arr = [];
    for (let key in params) {
      arr.push (`${key}=${params[key]}`);
    }

    script.src = `${url}?${arr.join ('&')}`;
    document.body.appendChild (script);
  });
}

jsonp ({
  url: 'http://www.baidu.com',
  params: {name: 'zhansgan'},
  callback: 'getUserMessage',
}).then (data => {
  console.log (data);
});

在这里插入图片描述