ajax获取qq音乐源码,jsonp的运用（获取qq音乐首页数据）以及用Promise的封装

什么是jsonp呢？

首先，因为ajax无法跨域，然后开发者就有所思考

其次，开发者发现，标签的src属性是可以跨域的

把跨域服务器写成调用本地的函数，回调数据回来不就好了？

json刚好被js支持(object)

调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址，最终生成的返回值都是一段js代码)

这种获取远程数据的方式看起来非常像ajax，但其实并不一样

便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。

传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

Installation

$ npm install jsonp

API

jsonp(url, opts, fn) //具体的url是访问地址， opts是配置， fn是回调

配置一般不写，而回调有两个参数err, data 具体请看代码(应用场景vue)

import originJSONP from 'jsonp'

//封装一个jsonp的常规方法，参数分别是 url地址，data数据，option配置

export default function jsonp(url, data, option) {

//利用下面的函数生成原生`jsonp`想要的url

//如果url末尾没有 ? 就加上如果有就加连接符&

let url += ('?'.indexOf(url) < 0 ? '?' : '&') + prama(data)

originJSONP(url, option, (err, data) => { //返回一个promise对象封装

return new Promise((resolve, reject) => {

if(!err) {

resolve(data)

}else {

reject(err)

}

})

}

//将data拼接到url里

function prama(data) {

let url = ''

for(let k in data) {

//解决传输数据里有undefiend的问题

let value = data[k] !== undefined ? data[k] : ''

//拼接注意value需要用这个函数解码

url += `&$(k)=$(encodeURIComponent(value))`

return url ? url.subString(1) : '' //去掉第一个 “&”符号

}

再来个上面的截图

jsonp.js

接下来，我们假设访问的一个qq音乐的网站想获取它的数据

需要一下参数，把固定的写到config.js里

config.js

再就可以将接口的方法写在一个文件里

recommend.js

于是我们就可以在recommend.vue调用这个接口了

image.png

可以打印出qq音乐首页的所有数据了！大功告成~

谢谢观看~

ajax获取qq音乐源码,jsonp的运用（获取qq音乐首页数据）以及用Promise的封装相关推荐

qq秀源码 php,JavaScript_js实现仿QQ秀换装效果的方法，本文实例讲述了js实现仿QQ秀换 - phpStudy...
js实现仿QQ秀换装效果的方法本文实例讲述了js实现仿QQ秀换装效果的方法.分享给大家供大家参考.具体实现方法如下: 仿QQ秀换装效果 #cs img{cursor:hand} var obj=ev ...
【脚本项目源码】Python制作多功能音乐播放器，打造专属你的音乐播放器
前言本文给大家分享的是如何通过利用Python实现多功能音乐播放器,废话不多直接开整~ 开发工具 Python版本: 3.6 相关模块: os模块 sys模块 time模块 random模块 PyQ ...
[AYUI]QQ管家源码已经开源
(0-50元黑色字体享受AY 1周的 ayui 技术问答) (50-100元绿色字体享受AY 15天的 ayui 技术问答) (100-150元蓝色字体享受AY 20天的 ayui ...
小程序代码反编译获取小程序源码nodejs
第一步,360软件管理里面搜雷电模拟器4,然后按装第二步,打开后按顺序下载,微信(用来打开小程序来获取小程序源码的wxapkg文件),QQ(从本地电脑发RE管理器到模拟器中进行安装),在模拟器中安装 ...
在线获取百度BDUSS源码支持5种登录方式
简介: 这个是模拟百度登录获取BDUSS的源码,更新总共5种获取方式,分别是普通登录.扫码登录.短信验证码登录和第三方登录(包括QQ登录和微信登录),可无视异地和登录保护. 网盘下载地址: http: ...
PHP 通过fsockopen函数获取远程网页源码
最新PHP 通过fsockopen函数获取远程网页源码以下是三零网为大家整理的最新PHP 通过fsockopen函数获取远程网页源码的文章,希望大家能够喜欢! 通过该函数可以获取指定端口的页面源码, ...
aide怎么打开html文件,求助！aide获取网页html源码
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 package com.mycompany.myapp; import android.app.*; import android.content.*; ...
python 爬虫源代码-Python爬虫学习之获取指定网页源码
本文实例为大家分享了Python获取指定网页源码的具体代码,供大家参考,具体内容如下 1.任务简介前段时间一直在学习Python基础知识,故未更新博客,近段时间学习了一些关于爬虫的知识,我会分为多篇 ...
Delphi自动提交网页表单和获取框架网页源码
这两个问题的实现原理其实是差不多的,所以放在一起介绍,单元MSHtml封装了我们需要的功能. 首先,新建一个DELPHI工程,在USES部分添加MSHtml单元的引用. 然后,在窗体上放置一个TWeb ...
linux eclipse 关联源码,获取Hadoop的源码和通过Eclipse关联Hadoop的源码
一.获取Hadoop的源码首先通过官网下载hadoop-2.5.2-src.tar.gz的软件包,下载好之后解压发现出现了一些错误,无法解压缩, 因此有部分源码我们无法解压 ,因此在这里我讲述一下如 ...

ajax获取qq音乐源码,jsonp的运用（获取qq音乐首页数据）以及用Promise的封装

ajax获取qq音乐源码,jsonp的运用（获取qq音乐首页数据）以及用Promise的封装相关推荐

最新文章

热门文章