jsonp原理并用promise实现JSONP

 jsonp由来:

浏览器为了保证安全,在访问不同源(协议,域名,端口号有一个不一样都叫不同源)的资源时,浏览器会拦截。

为了绕开浏览器的跨域拦截,就有了jsonp跨域方案

jsonp原理:

js中利用标签(例如 script、img等)的src能加载不同源的资源,从而实现跨域。

eg: 利用script加载一个不同源的文件,该文件返回一个函数名,如果返回的函数名在js文件中正好有这个函数,那返回的函数名就调用js文件中的方法,从而达到交流的目的 。

利用这个原理我们用promise来实现一个jsonp公共方法

function jsonP(url, data) {
    return new Promise((reslove, reject) => {
       // 判断url中是否有带参数,有的话拼接&符,没有的话拼接?号;方便下次拼接参数
      const dataString = url.indexOf('?') === -1 ? '?' : '&';
       // 利用时间戳声明一个唯一的变量
      const callBack = `CB${new Date().getTime()}`;
        // 将变量名拼接在链接上
      url += `${dataString}callBack=${callBack}`;
      if (data) {
        // 如果有参数将参数拼接到URL上
        Object.keys(data).forEach((item) => {
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值