企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] #### vue 封装 JSONP * [ ] 安装 cnpm i -S jsonp * [ ] src 目录下新建 ![](https://box.kancloud.cn/9533f1b0b56751a63571339a5e88a9fc_195x134.png) * [ ] src / common / js / jsonp.js ~~~ import originJsonp from 'jsonp'; /** * * @param url 后端路径 * @param data 数据 * @param option 选项 * @returns {Promise<any>} 返回 Promise 对象 */ 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) } }) }) } /** * 组装符合jsonp格式路径 * @param data 数据 * @returns {string} */ 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 请求 QQ 音乐 * [ ] QQ 音乐api [https://c.y.qq.com/musichall/fcgi-bin/fcg\_yqqhomepagerecommend.fcg](https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg) * [ ] 数据格式 ![](https://box.kancloud.cn/1550f319a8f0ad7aa4245ef3a53bbe87_527x190.png) * [ ] 使用 jsonp 请求 * [ ] src 目录下新建api目录 ![](https://box.kancloud.cn/9e815446172e96fb3231a76f88c707f5_212x111.png) * [ ] config.js ~~~ export const commonParams = { g_tk: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp' } export const options = { param: 'jsonpCallback' } export const ERR_OK = 0 ~~~ * [ ] recom.js ~~~ import jsonp from '../common/js/jsonp.js' import { commonParams, options } from './config' export function getRecom() { const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg' const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }); return jsonp(url, data, options) } ~~~