jsonp的原理介绍及Promise封装 javascript

什么是jsonp ：

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

jsonp的实现原理：

动态创建script标签，因为script标签是没有同源策略限制，可以跨域的。 把script标签的src指向正式服务端地址，这个地址跟个参数callback=xxx, 服务端在返回数据时，在xxx里包裹一个方法（里面是返回的数据），相当于在前端执行xxx这个方法，但是浏览器并没有这个方法，所以在发送请求之前在window注册这个方法，这样的话相当于在前端执行window.xxx()这个方法去获取数据。 具体看接下来的实现！

想看jsonp具体实现的可看官网地址：jsonp git地址

介绍：

参数介绍

jsonp(url, opts, fn)

• url (String) 服务器端数据接口地址
  opts (Object) 一般只需关注param即可

• param (String) 默认是callback,这是与后端约定的参数名称，也可以随便定义，只要前后端统一

• timeout (Number) 请求超时时间，默认是6000ms

• prefix (String) callback值的前缀，默认是__jp

• name (String) 指定全局注册的回调方法名，一般不会用到，因为默认是prefix+自增数字

fn 回调方法，用es6 Promise

使用方法

步骤一、

首先安装这个库，因为我是在node npm环境下开发，所以

$ npm install jsonp

步骤二、

下面是具体用法：
建一个名叫jsonp.js的文件
先引入jsonp库文件

import originJSONP from 'jsonp'

对外暴露方法 url:请求服务器地址，data:参数

export default function jsonp(url,data,option) {
    url += (url.indexOf('?')<0?'?':'&')+param(data)
    return new Promise(function(resolve,reject) {
        originJSONP(url,option, function(err,data) {
            if(!err){
                resolve(data)
            }else{
                reject(err)
            }
        })
    })
}

定义一个将Object的参数处理成为 url挂载参数的形式 的函数

export 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) : ''
}

到这里 这个Promise 就封装好了，接下来就具体调用来获取数据

完整的jsonp.js文件：

//jsonp.js文件

import originJsonp from 'jsonp'       //首先引入jsonp

//第一个参数url为接口地址。
// 第二个参数data为接口地址后面携带的参数。因为jsonp不支持直接传一个对象。所以，我们可以把url和需要传的参数分开。这样我们调用这个方法的时候会更加方便。
// 第三个参数opts为对应api上面的opts
export default function jsonp(url, data, opts) {
  //拼接url和需要传递的参数data。
  //先判断url后面有没有?号，没有的话后面加？,有的话后面加&
  url += (url.indexOf("?") < 0 ? "?" : "&") + param(data);

  //jsonp的函数我们需要返回一个promise
  return new Promise((resolve, reject) => {
    originJsonp(url, opts, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}


//封装一个方法，把对象拆解出来拼接到url的后面
export function param(data) {
  let url = "";
  for (var k in data) {
    //如果data[k]为undefined的话，就返回空
    let value = data[k] !== undefined ? data[k] : "";
    //我们使用 encodeURIComponent() 对 URI 进行一下编码
    url += `&${k}=${encodeURIComponent(value)}`;
  }
  //如果url不为空的话需要删去第一个&。
  return url ? url.substring(1) : "";
}

步骤三、

建一个js文件，名字自己定义
引入前面封装的jsonp.js

import jsonp from '../common/js/jsonp.js'

定义参数

const commonParams = {
    g_tk:1319877694,
    inCharset:'utf-8',
    outCharset:'utf-8',
    notice:0,
    format:'jsonp'
};

定义前后端统一参数

const options = {
    param:'jsonpCallback'
};

定义获取数据函数 这里我是拿QQ音乐的数据https://m.y.qq.com/

export function getDataFunc() { 
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
    const data = Object.assign({},commonParams,{
        platform:'h5',
        uin:0,
        needNewCode:1,
    })
    return jsonp(url,data,options)
}