在項目中，經常需要用到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以及介紹。

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

三：調用封裝好的方法。目錄結構：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的代碼及解釋：

// 引入封裝好的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) }③：使用此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音樂歌單推薦列表的例子，運行結果為：

總結

以上是生活随笔為你收集整理的利用ES6-Promise()方法封装原始jsonp实现跨域请求公用方法(告别使用JQuery封装好的jsonp）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。