JSONP 通用函数封装
function jsonp({url, params, callback}) {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
// callback 让服务器端调用,并且将数据传递进来
window[callback] = function (data) {
resolve(data)
document.body.removeChild(script)
}
params = {...params, callback}
const arr = []
for (let key in params) {
arr.push(`${key}=${params[key]}`)
}
script.src = `${url}?${arr.join('&')}`
document.body.appendChild(script)
})
}
function synchronize(urls) {
return urls.map((url,i) => jsonp({url, params: {}, callback: 'show' + i}))
}
const ajurl = [
'http://api.douban.com/v2/movie/in_theaters',
'http://api.douban.com/v2/movie/top250'
]
Promise.all(synchronize(ajurl))
.then(result => {
for (let val of result) {
console.log(val)
}
})
JSONP 通用函数封装的更多相关文章
- ajax和jsonp的封装
一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...
- jsonp 简单封装
import originJSONP from 'jsonp' // 引入 jsonp 模块 // 对外暴露方法 jsonp // 通常传给服务端的 url 地址带参数 设计目的是希望有纯净的 url ...
- 用Vue来实现音乐播放器(六):JSONP的封装
在npm上下载jsonp的包 这个包的用法 传入的参数是地址加上地址参数的混合 但是想封装一个将地址和地址参数分别传入的jsonp方法 所以来封装一个 import originJSONP from ...
- jsonp promise 封装
import originJsonp from 'jsonp' export default function jsonp(url, data, option) { url += (url.index ...
- jsonp promise封装
npm 安装jsonp import originJSONP from 'jsonp' export default function jsonp(url, data, option){ url += ...
- jsonp封装
//jsonp的封装函数 function jsonp(url,parmter,callback){ //创建script标签 var script=document.createElement('s ...
- 网络请求之jsonp封装
首先介绍下jsonp原理 浏览器因为同源策略的限制,在不同源的服务器通过我们传统axios是不能直接用来请求数据的(忽略代理),而src标签则不受同源策略的影响,所以我们需要动态的创建带有src的标签 ...
- jsonp跨域封装
一.什么是同源政策? 同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI.主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来 ...
- JSONP是如何工作的
我对这个问题的探究来源于一个需求: 当访问某个页面的时候,需要向另外一个网站报告一下这次访问的信息. 其实发一个跨域的请求就能大致实现这个需求.我们发跨域的例子其实很常见,例如请求一个第三方的图片.引 ...
随机推荐
- node.js mysql 使用总结
npm install mysql 使用mysql连接池 let mysql = require('mysql'); let db_config = { "connectionLimit&q ...
- sql使用自连接去重复查询
查询公司与公司最新刷新的一条信息 select t1.userid,t1.id,t1.title,t1.RegType,t1.Salary,t1.SubjectID,t1.RefreshTime,t2 ...
- IntelliJ IDEA热部署教程,只要两步!
一.开启idea自动build功能1.File -> Settings -> Build,Execution,Deployment -> Compiler -> Build p ...
- Java 重写hashCode() 时为什么要用 31 来计算
在OSChina 中看到了一篇文章<Java 中正确使用 hashCode 和 equals 方法>,看到 hashCode 的方法体内的31比较有意思. 在Stackoverflow上找 ...
- mysql 常用操作语句
1 根据表中的其中一个字段的值来修改同行某字段的值 UPDATE radar a INNER JOIN radar b ON a.id=b.id SET a.letter=LEFT(b.filena ...
- 05_Jedis操作Redis
[工程截图] [String类型操作] package com.higgin.string; import java.util.List; import redis.clients.jedis.Jed ...
- linux 服务注册 service文件 在service文件中设置变量和环境变量
[Unit] Description= #服务描述 After=syslog.target #服务启动依赖 [Service] Type=forking #服务启动类型 可 ...
- phpunit 单元测试之代码覆盖率
最近团队在不断完善项目中的单元测试用例,会用到代码覆盖率分析,本来以为 homestead 应该默认安装了 xdebug ,所以使用 phpunit --coverage-html ./tests/c ...
- spring-4.3.16+xfire-spring-1.2.6版本升级
最近爆了个spring的漏洞,然后公司整体要求升级spring到最新版本,然后搞四了一大批猿人. spring-4.*的最新版本是4.3.16(稳定版) xfire-spring-1.2.6(最新版- ...
- 保存Google、Bing翻译的语音
以Chrome浏览器+google翻译为例,bing的下载步骤也类似 1.打开google翻译页面(translate.google.com),输入一段文本,如下图 2.可以看到,右侧已经翻译好了,这 ...