利用ES6-Promise()方法封装原始jsonp实现跨域请求公用方法(告别使用JQuery封装好的jsonp）

在项目中，经常需要用到jsonp实现跨域请求，假如使用JQuery封装好的jsonp方法，是很容易实现的，缺点：需要引入JQuery库。

    $.ajax({        url : './package.json',        type : 'get',        dataType : 'jsonp',        jsonp : 'jsonpCallback', //成功回调,如果不设置,默认返回callback,后端需要返回此方法        success : function (data) {            console.log(data);        },        error : function (error) {            console.log(error);        }    })

在项目中，如何做到不使用JQuery封装好的方法实现jsonp请求呢？接下来介绍如何利用ES6-Promise()方法封装原始jsonp实现跨域请求公用方法。

一：安装原始jsonp，地址：https://github.com/webmodules/jsonp，安装方法如下：

原始jsonp方法介绍：

二：利用Promise()封装jsonp方法。目录结构：common（公用）文件夹下新建js文件夹，js文件夹中新建jsonp.js，以下为封装好的jsonp.js以及介绍。

// 引入安装好的原始jsonpimport originJsonp from 'jsonp'// export jsonp方法,以便在其他模块调用export default function jsonp(url, data, option) {  // 拼接url参数  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)  // 返回Promise对象  return new Promise((resolve, reject) => {    originJsonp(url, option, (err, data) => {      if (!err) {        resolve(data)      } else {        reject(err)      }    })  })}// 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) : ''}

三：调用封装好的方法。目录结构：api文件夹下新建config.js以及recommend.js

①：提取公共参数配置，实现代码复用，以下为config.js代码

// 公共参数export const commonParams = {  g_tk: 1928093487,  inCharset: 'utf-8',  outCharset: 'utf-8',  notice: 0,  format: 'jsonp'}export const options = {  param: 'jsonpCallback',  prefix: 'jp'}export const ERR_OK = 0

②：封装调用API，以下为recommend.js的代码及解释：

// 引入封装好的jsonpimport jsonp from 'common/js/jsonp'// 引入公用配置import {commonParams, options} from './config'export function getRecommend() {  // 请求的地址  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'  // 对象拷贝,即将公用参数以及特有参数合并为一个对象,并拷贝到data对象中  const data = Object.assign({}, commonParams, {    platform: 'h5',    uin: 0,    needNewCode: 1  })  // 调用封装好的jsonp方法  return jsonp(url, data, options)}

③：使用此API，以vue为例：

 import {getRecommend} from 'api/recommend'  import {ERR_OK} from 'api/config'  export default {    created() {      this._getRecommend()    },    methods: {      _getRecommend() {        getRecommend().then(res => {          if (res.code === ERR_OK) {            console.log(res.data.slider)          }        })      }    }  }

以上为抓取qq音乐歌单推荐列表的例子，运行结果为：