在專案中，經常需要用到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);
        }
    })
 

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

原始jsonp方法介紹：

二：利用Promise()封裝jsonp方法。目錄結構：common（公用）資料夾下新建js資料夾，js資料夾中新建jsonp.js，以下為封裝好的jsonp.js以及介紹。

// 引入安裝好的原始jsonp
import 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) : ''
}
 

①：提取公共引數配置，實現程式碼複用，以下為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
 

// 引入封裝好的jsonp
import 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)
}

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