jsonp的原理介绍及Promise封装

什么叫jsonp?

jsonp是json with padding(填充式json或参数式json)的简写,是经过ajax请求跨域接口,获取数据的新实现方式前端

jsonp的实现原理:

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

https://github.com/webmodules...
这个是jsonp库的具体实现,建议下载来研究一下,最好本身动手写一遍。本文主要是Promise封装,因此就不具体介绍jsonp的具体实现git

步骤一:

首先安装这个库,由于我是在node npm环境下开发,因此es6

$ npm install jsonp

参数介绍
jsonp(url, opts, fn)
url (String) 服务器端数据接口地址
opts (Object) 通常只需关注param便可github

  • param (String) 默认是callback,这是与后端约定的参数名称,也能够随便定义,只要先后端统一web

  • timeout (Number) 请求超时时间,默认是6000msajax

  • prefix (String) callback值的前缀,默认是__jpnpm

  • name (String) 指定全局注册的回调方法名,通常不会用到,由于默认是prefix+自增数字json

fn 回调方法,用es6 Promise后端

步骤二:

下面是具体用法:
建一个名叫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 就封装好了,接下来就具体调用来获取数据

步骤三:

建一个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/(感谢QQ音乐的接口支持)

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)
}

到此,我们就完成用jsonp库进行Promise封装,并获取数据的过程! 感谢阅读!

相关文章
相关标签/搜索