vue_music:JSONP

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016939020

文章标签：

#javascript #json #ViewUI

本文深入探讨了JSONP作为一种跨域数据请求方法的工作原理，特别是在QQ音乐数据抓取的应用中。介绍了如何创建并使用JSONP插件实现跨域请求，以及如何在项目中调用该插件来获取歌曲列表等数据。

在获取qq音乐的某些数据的时候，经常用到JSONP，如下图图片描述

JSONP：不是Ajax请求，而是网页通过添加一个<script>元素，利用src天然跨域的特性，向服务器请求JSON数据，这种做法不受同源政策限制，但是只是适合GET请求方式
在此项目中我们使用插件JSONP

1.介绍JSONP插件

图片描述

2.创建公共方法jsonp.js

//导入安装的jsonp插件
import originJSONP from 'jsonp'

//暴漏一个公共方法
export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    //参照介绍JSONP,调用原生的JSONP方法
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
//序列化参数
function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    //encodeURIComponent对url中的字符进行编码
    //进行编码是因为Url中有些字符会引起歧义
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

3.调用公共方法示例

如何调用方法？
例如在获取歌曲列表的时候singer.js

//导入公共方法
import jsonp from 'common/js/jsonp'

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

  const data = Object.assign({}, commonParams(不用考虑), {
    channel: 'singer',
    ....
  })
  //options = {param: 'jsonpCallback'}
  //在介绍JSONP的时候param:查询字符串参数的名称来指定回调,所以为jsonpCallback
  return jsonp(url, data, options)
}