JSONP原理介绍+插件安装与使用

本文链接：https://blog.csdn.net/wushihang11/article/details/88046331

原理

实际上是利用script没有跨域限制，先创建一个script标签，src里面放服务端请求路径，参数后面会带着callback=xxx，这个实际是个回调，返回的数据会是：xxx(json)这样的格式。。

JsonP插件

地址：https://www.npmjs.com/package/jsonp
github：https://github.com/webmodules/jsonp

install：
npm install 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) –

Param 重点关注

-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

项目应用实战

JSONP封装

@param { string } url – url地址
@param { object } data – 传参配置项（url传参配置）
@param { object } option – 传参配置项（jsonp回调名称）

export default function jsonp(url, data, option) {
	
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
    
export function param(data) {
  let url = ''
  debugger
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}