封装属于自己的Jsonp

先放上jsonp官方文档
链接：https://github.com/webmodules/jsonp
API
jsonp(url, opts, fn)

• url (String) url to fetch

• opts (Object), optional

  • param (String) name of the query string parameter to specify the callback (defaults to callback)
  • timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
  • prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
  • name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)

• fn callback

The callback is called with err, data parameters.

If it times out, the err will be an Error object whose message is Timeout.

Returns a function that, when called, will cancel the in-progress jsonp request (fn won’t be called).

对于官方API解释
jsonp(url, opts, fn)
没有传数据的地方，所有数据需要跟在url后面
例如某宝热卖推荐jsonp接口：

https://ju.taobao.com/json/tg/ajaxGetItemsV2.json?%20page=1&psize=20&type=0&frontCatId=&callback=__jp0

后面20page=1&psize=20&type=0&frontCatId=&callback=__jp0都是数据

opts----是一些函数本身需要用到的参数 包含

• param执行回调的时候，去查找param这个字符串作为回调
• timeout超出这个时间视为错误
• 其他两个不太重要。

fn----是获取到数据后进行回调。回调函数会默认传入err和data两个参数。但是我们需要promise对象，所以这里不采用回调，为了能得到promise，我们才封装这个新的属于自己的jsonp

import jsonp from 'jsonp';

// 目标 是把这种对象
// {
//   type,
//   page: 1,
//   psize: 20
// }
// 转化成 这样的字符串  "page=1&psize=20"

const parseParam = param => {
  let params = [];
  // 对于数组有join方法，可以把数组内所有元素用符号连起来。 所以我们先将对象的key和value存在数组中
  for (const key in param){
    // params.push([key, param[key]]);
    params.push([key, encodeURIComponent(param[key])]);
  }
  // [[page, 1], [pszie, 20]]
  return params.map(value => value.join('=')).join('&');
  // 利用map，对二位数组里面每个对象单独进行操作。 
  // [[page, 1], [pszie, 20]]
  // [page=1, psize=20]
  // page=1&psize=20
}

export default (url, data, options) => {
// 有问号就直接连字符连起来，没有问号就加上问号
  url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);
	// 自己封装的jsonp最后目的是返回一个promise对象
    return new Promise((resolve, reject) => {
       // 调用原生的jsonp      原生jsonp的callback会自动传入err和data两个参数
      jsonp(url, options, (err, data) => {
        if(err){
          reject(err);
        }else{
          resolve(data);
        }
      });
    }).catch(err => {
      console.log(err);
    });
}

至此，属于自己的jsonp封装完毕
开始调用。

// 封装一个函数 获取热门推荐数据
export const getHomeRecommend = (page=1, psize=20) => {
  const url = 'https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';
  // 此处的parms是我们最终目标url后面的数据
  // 最终目标 https://ju.taobao.com/json/tg/ajaxGetItemsV2.json?%20page=1&psize=20&type=0&frontCatId=&callback=__jp0
  const params = {
    page,
    psize,
    type: 0,
    frontCatId: ''
  };

  return jsonp(url, params, {
    params: 'callback'，   // 这里不传也行，默认也是callback
  })
  // 此处就利用到了我们封装后的jsonp返回promise对象的特性。可以进行异步操作了
  .then(res => {
    console.log(res);
    // 成功后的code。  这个是获取到数据之后服务器返回的成功代码。不同的jsonp地址返回的代码 可能会不一样
    if(res.code === '200'){
      return res;
    }
  })
}