jsonp的使用——qq音乐为例

最新推荐文章于 2024-04-23 08:22:56 发布

XiaoHuangDiLHD

最新推荐文章于 2024-04-23 08:22:56 发布

阅读量603

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/XiaoHuangDiLHD/article/details/82844290

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文通过在Vue项目中实现jsonp的使用，详细介绍了如何安装、引入并自定义jsonp函数，以完成与音乐API的数据交互。代码示例来源于慕课网教程，适合初学者学习jsonp的工作原理。

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

上一篇中对jsonp的源码进行了分析，所以这篇文章是对jsonp的使用，加深对jsonp的理解。首次使用，如有错误，请告知。互相学习，互相借鉴。

因为我最近在看慕课网上的用vue实现音乐app的教程，所以这里我也会使用vue来实现。

安装jsonp

$ npm install jsonp

引入jsonp

import originJSONP from 'jsonp'

定义一个实现jsonp的函数

//jsonp.js
export default function jsonp(url, opts, fn) {
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    return new Promise ((resolve, reject) => {
        originJSONP(url, option, (data, err) => {  
            if(!err) {
                resolve(data)
            } else {
                reject(err)
            }
        })
    })
}

function param (data) {
    let url = ''
    for(let i in data){
        const value = data[i] !== undefinted ? data[i] : ''
        url += `&${i} = ${encodeURIComponent(value)} `
     }
    return url ? url.substring(1) : ''
}

//newJsonp.js
import jsonp from 'common/js/jsonp'
import {commonParams,options} from './config'
export default function newJsonp() {
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

    const data = Object.assign({}, commonParams, {
       platform: 'h5',
       uin: 0,
       needNewCode: 1
  }) 
    return jsonp(url, data, options)
}

//config.js
export const commonParams = {
  g_tk: 1928093487,
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}

export const options = {
   param: 'jsonpCallback'
}

代码全部来自教程之中，我只是自己重新码了一次，加深记忆的同时加深对jsonp的理解。