ES6中JSONP的使用

发表于 | 分类于

上一篇文章说了 JSON、JSONP、AJAX、跨域之间的联系与区别，在结算 JSONP 的环节中，也深刻的通过举例说明，解释了 JSONP 实现的原理。但是都是通过简单的例子，今天我们说说我在项目中是怎么使用JSONP的。这里我用到的是github上面一个简单的JSONP接口

API

它的实现源码在 index.js 中，有兴趣的童鞋可以看看，只有几十行代码。我们先说说他的API:

jsonp(url, opts, fn)

  • url (String) url
  • opts (Object) 可选
    • param (String) 与后台jsonp接口约定好的回调参数名称(默认为 callback)
    • timeout (Number) 超时报错时间(默认为 60000ms),即请求超过1分钟报超时
    • prefix (String) 处理jsonp响应的全局回调函数的前缀（默认为jp）
    • name (String) 处理jsonp响应的全局回调函数的名称（默认为前缀+递增计数器）
  • fn callback 回调函数，带有err和data两个参数

使用

若你的项目中引入了 jquery 或者 zepto,当然直接用他们封装好在 AJAX 中的方法就好啦。这里也一样，直接调用 jsonp 方法就不多说了。直接展示另外一种使用方法，基于 jsonp 封装成一个基于ES6 的 Promise jsonp 方法。

先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import originJsonp from 'jsonp'

/**
 * Promise jsonp方法
 * url {String} 无参数纯url
 * data {Object} 传给后台的可选param参数对象,对应originJsonp方法中的opts
 * option {Object} 与后台约定的函数方法名参数对象
 */
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)
      }
    })
  })
}

/**
 * 拼接url后的参数
 * data {Object} 传给后台的可选param参数对象
 */
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) : ''
}

这里需要注意的是，jsonp方法与封装前的jsonp方法（这里是originJsonp方法）参数略有不同。其他详细的看代码应该就懂了。使用方式为：

可以先封装成获取特定数据的一个方法，这里是 getRecommend()，当然你也可以直接把参数传入jsonp方法，但是这样参数可能看起来有点长和凌乱(根据业务情况，至少这里是这样)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export function getRecommend() {

  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  
  const data = {
    g_tk: 1928093487,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'
    platform: 'h5',
    uin: 0,
    needNewCode: 1
  }

  const options = {
    param: 'jsonpCallback'
  }
  
  return jsonp(url, data, options)
}

然后在需要的地方调用方法使用即可：

1
2
3
getRecommend().then((res) => {
   this.recommends = res.data.slider
})

以上就是日常项目中jsonp的使用。



完~