jsonp的原理及在vue中封装jsonp方法

最新推荐文章于 2025-05-23 06:48:24 发布

Liu331013

最新推荐文章于 2025-05-23 06:48:24 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript jsonp

本文链接：https://blog.csdn.net/Liu331013/article/details/115325279

本文深入浅出地介绍了JSONP的工作原理，并展示了如何在Vue中封装一个JSONP函数。通过实例解析了如何使用这个封装的函数来请求QQ音乐接口，帮助开发者更好地理解和应用JSONP进行跨域数据获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一篇写的很通俗易懂的jsonp文章

https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

在Vue中封装的jsonp方法

@param { string } url – url地址
@param { object } data – 传参配置项（url传参配置）
@param { object } option – 传参配置项（jsonp回调名称）

import originJsonp from 'jsonp'

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

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

以请求QQ音乐接口为例

function getTopList() {
  const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'

  const data = Object.assign({}, {
  	g_tk: 1928093487,
  	inCharset: 'utf-8',
  	outCharset: 'utf-8',
  	notice: 0,
  	format: 'jsonp',
    uin: 0,
    needNewCode: 1,
    platform: 'h5'
  })

  return jsonp(url, data, 'jsonpCallback')
}