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是如何工作的
我对这个问题的探究来源于一个需求: 当访问某个页面的时候,需要向另外一个网站报告一下这次访问的信息. 其实发一个跨域的请求就能大致实现这个需求.我们发跨域的例子其实很常见,例如请求一个第三方的图片.引 ...
随机推荐
- linux安装lua_nginx_module模块
ngx_lua_module 是一个nginx http模块,它把 lua 解析器内嵌到 nginx,用来解析并执行lua 语言编写的网页后台脚本,可以用来实现灰度发布.另外淘宝的OpenResty也 ...
- Csharp: FreeTextbox 编辑器控件运行时错误: 'FTB_ResizeGalleryArea' 未定义
ftb.imagegallery.aspx 改一下代码: <form id="Form1" runat="server" enctype="mu ...
- 对象大小对比之Comparable与Comparator
一 概述 1.Comparable与Comparator使用背景 数值型数据(byte int short long float double)天生可对比大小,可排序,String实现了Compara ...
- 避免console错误,console兼容
背景:写js代码时写了很多console.log进行日志打印,最后上生产时不想删除日志输出, 但是ie在不打开控制台时,日志输出会导致后续js不执行,所以需要适时屏蔽js日志输出 (IE等不支持con ...
- js 正则表达式简易教程
(http://www.cnblogs.com/tugenhua0707/p/5037811.html#_labe6)
- java实现链表结构详细代码
一.数据准备 1. 定义节点 2. 定义链表 1.数据部分 2.节点部分 class DATA //数据节点类型 { String key; String name; int age; } cla ...
- CSS样式编写案例
1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位 步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位 步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...
- wxpython 简单表格控件
import wx, wx.grid class GridData(wx.grid.PyGridTableBase): _cols = "a b c".split() _data ...
- Python3循环语句
Python3 循环语句 Python中的循环语句有for和while. 循环语句控制结构图如下: 一.while循环 ①循环结构 while 判断条件: 执行语句 实例: n = int(input ...
- 设计模式——观察者模式(ObserverPattern)
观察者模式(ObserverPattern):观察者模式又称发布-订阅(Publish/Subscribe)模式,定义了一个中一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...