一、需求

在使用一些接口的时候,只能进行 jsonp。

使用的 jsonp 的框架是:

这个库使用的时候很简单:

我是用 yarn 安装的:

yarn add jsonp

使用方式:

jsonp(url,options,function(err,data){}) 

其中比较关键的是 options:

  • param:指定 callback函数的参数名。默认就是callback
  • timeout: 超时时间 默认 60000
  • prefix:callback 函数的前缀 默认是 __jp
  • name:回调函数的方法名。如果不指定,则默认为 __jp0 __jp1,也就是前缀+自增数字

需要注意的是,最后拿到的回调函数中,err 是在前面 data 是在后面的

回调函数很麻烦,因此需要进行 Promise 的封装,以便使用。

二、Promise 的封装

主要是两部分:

  • 对 data 的处理
  • 发送 jsonp 请求
/**
 * jsonp 的 Promise封装
 * - 基于 https://github.com/webmodules/jsonp
 * @param {String} url 
 * @param {Array} data 
 * @param {Object} option 
 */

import _jsonp from 'jsonp';

export default function jsonp(url,data,option){
    url += (url.includes("?") ? "&" : "?") + getParam(data); 
    return new Promise((resole,reject)=>{
        _jsonp(url,option,(err,data)=>{
            if(!err){
                resolve(data);
            }else{
                reject(err);
            }
        })
    })
}
// 对 data 进行处理拼接到url上
function getParam(data){
    let url="";
    for(let item in data){
        let tmpVal = data[item];
        let value = (tmpVal !== undefined ? tmpVal :'');
        url += `&${item}=${encodeURIComponent(value)}`;
    }
    return url ? url.substring(1) : '';
}

三、使用

使用的话引入使用即可:

const options = {params:'jsonpCallBack'}
const url = 'http://demo.url';
const data = {
    name:"postbird"
};
jsonp(url,data,options).then((value)=>{
    console.log(value);
},(err)=>{
    console.log(err);
});