20、promise与ajax jsonp
一.Promise的作用是什么?
当有多个请求之间有相互依赖关系（紧接着的请求需要上一次请求的返回结果），这时promise的作用就凸显出来了。
二.如何使用promise?
new Promise(function(resolve,reject){
1.处理语句
if(处理成功){
resolve([参数]);
}else{
reject([参数]);
}
});
三.promise的两个原型方法(对方方法) then(),catch()
1.当前promise对象标志成resolve状态时,调用 then(function([参数]){处理语句})
2.当前promise对象标志成reject状态时,调用catch(function([参数]){处理语句})
四.Promise.all() : 静态方法
当all中全部promise对象标志成resolve时,当前对象才返回resolve状态,否则,只有一个返回reject状态,当前对象返回reject状态
//判断信息为true时,输出hello false时，输出bye
function fn(msg){
//创建promise对象
let pm = new Promise(function(resolve,reject){ //resolve:表示成功的状态，reject:表示失败的状态
if(msg){
resolve(); //标志成功
}else{
reject(); //标志失败
}
});
return pm;
}
var p = fn(1); //p接收的是调用函数后返回的promise对象
p.then(function(){
alert('hello');
});
p.catch(function(){
alert('bye');
});
加载一张图片
//创建一个数组，存放图片地址
const arrImgs = ['img/0.jpg','img/1.jpg','img/2.jpg'];
//加载图片
function loadImg(src){
return new Promise(function(resolve,reject){
//处理加载图片的过程
//Image 创建img对象
var img = new Image(); //document.createElement('img');
img.src = src; //给img对象添加src属性
img.onload = function(){
resolve(this);
}
//错误事件
img.onerror = function(){
reject(new Error('图片加载失败！'));
}
});
}
var oP = loadImg(arrImgs[1]);
oP.then(function(img){
document.body.appendChild(img); //当浏览器加载图片成功后，将图片放到页面中。
}).catch(function(err){
console.log(err);
})
解决ajax依赖导入的问题
从内容中获取地址
//获取页面元素
let oBtn = document.getElementById("btn");
let oDiv = document.getElementById("box");
oBtn.onclick = function(){
new Promise(function(resolve,reject){
ajax.get('1.txt',function(data){
resolve(data);
})
}).then(function(data){
return new Promise(function(resolve,reject){
ajax.get(data,function(str){
resolve(str);
})
})
}).then(function(data){
ajax.get(data,function(str){
oDiv.innerHTML = str;
})
})
}
通过对象调用的方法是对象方法;
通过构造函数调用的方法是静态方法. //Math
string.fromCharCode()
//通过对象调用的方法，称为对象方法
//通过构造函数调用的方法，称为静态方法 Math String.fromCharCode()
const arrImgs = ['img/0.jpg','img/1.jpg','img/2.jpg'];
function loadImg(src){
//创建Promise对象
return new Promise(function(resolve,reject){
let img = document.createElement('img');
img.src = src;
img.onload = function(){
resolve(this);
}
img.onerror = function(){
reject('图片加载失败！');
}
})
}
//Promise.all([]) :数组中返回的promise对象全部是resolve状态时，当前的promise对象都是resolve状态；只要有一个返回的是reject,当前的promise对象就是reject状态。
let oP = Promise.all([loadImg(arrImgs[0]),loadImg(arrImgs[7]),loadImg(arrImgs[2])]);
oP.then(function(imgs){
imgs.forEach(function(value){
document.body.appendChild(value);
})
}).catch(function(str){
console.log(str);
})
jsonp 掌握其思想
src属性：具有跨域的特点
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="txt" id="txt" value="" />
<ul id='ul1'></ul>
<script type="text/javascript">
//src属性：具有跨域的特点
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaaa&cb=
let otxt = document.getElementById("txt");
let oUl = document.getElementById("ul1");
otxt.onkeyup = function(){
//创建script标签
let sc = document.createElement('script');
//设置src属性
sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=fn";
document.getElementsByTagName('head')[0].appendChild(sc);
}
function fn(data){
// console.log(data);
var arr = data.s;
for(var i = 0,len = arr.length;i < len;i ++){
let li = document.createElement('li');
li.innerHTML = arr[i];
oUl.appendChild(li);
}
}
</script>
</body>
</html>
20、promise与ajax jsonp的更多相关文章
- 跨域请求jQuery的ajax jsonp使用常见问题解答
前天在项目中写了ajax jsonp的使用,出现了问题:能够成功获得请求结果,但没有运行success方法,直接运行了error方法提示错误--ajax jsonp之前并没实用过.对其的理解为跟普通的 ...
- PHP AJAX JSONP实现跨域请求使用实例
在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”.有兴趣的童鞋可以看看 今天我写的是PHP AJAX JS ...
- AJAX JSONP源码实现（原理解析）
关于JSONP以及跨域问题,请自行搜索. 本文重点给出AJAX JSONP的模拟实现代码,代码中JSONP的基本原理也一目了然. <html xmlns="http://www.w3. ...
- 项目中关于ajax jsonp的使用
项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() { $.ajax({ ...
- 跨域请求之jQuery的ajax jsonp的使用解惑
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- jQuery的ajax jsonp跨域请求
了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...
- C# WebClient、jQuery ajax jsonp实现跨域
WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...
- Promise实现ajax
利用Promise实现ajax GET function getAjax(url) { return new Promise((resolved,rejected)=>{ //创建ajax对象 ...
- 跨域Ajax -- jsonp和cors
跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
随机推荐
- AlexNet总结
https://blog.csdn.net/Rasin_Wu/article/details/80017920 https://blog.csdn.net/chaipp0607/article/det ...
- 配置带用户权限的docker registry v2
v1版本的docker registry用nginx配置,v2版本的用nginx有些问题,客户端总是会请求到v1/下面去, 以下从 http://blog.csdn.net/felix_yujing/ ...
- C#退出程序，退出任务管理器
//窗体关闭之前 this.FormClosing += (s, r) => { System.Environment.Exit(0); }; //窗体关闭 this.Closed += (s, ...
- unit3d 初次接触
最近, 有朋友告我,他们做那个 vr 视频啥的,告我看后,感觉很好,故 ,就去网上搜索一下,了解如下: 1..unit 3d 是啥? Unity3D是一个跨平台的游戏引擎 是由Unity Techno ...
- 用于Spring Boot Jar部署的shell脚本
用于在Jenkins将jar发送到目标节点之后的部署操作, 包含deploy, start, stop, restart功能. 在deploy时会自动备份原jar至指定目录 # Please defi ...
- Python内置的urllib模块不支持https协议的解决办法
Django站点使用django_cas接入SSO(单点登录系统),配置完成后登录,抛出“urlopen error unknown url type: https”异常.寻根朔源发现是python内 ...
- iOS CALayer 绘图模糊有锯齿的解决方案
在CALayer中绘制图形会出现锯齿和模糊,同样绘图在UIView中就没有问题.经查资料发现不自动处理两倍像素的情况. 解决方案为:设置layer的contentsScale属性为[[UIScreen ...
- Android App 安全的HTTPS 通信
漏洞描述 对于数字证书相关概念.Android 里 https 通信代码就不再复述了,直接讲问题.缺少相应的安全校验很容易导致中间人攻击,而漏洞的形式主要有以下3种: 自定义X509TrustMana ...
- CentOS 7 使用 ACL 设置文件权限
Linux 系统标准的 ugo/rwx 集合并不允许为不同的用户配置不同的权限,所以 ACL 便被引入了进来,为的是为文件和目录定义更加详细的访问权限,而不仅仅是这些特别指定的特定权限. ACL 可 ...
- IIS7设置将域名不带www跳转到带www上
很多朋友在IIS环境中搭建好网站后,习惯性将带www和不带www的域名都绑定到一个网站上,这样做虽然两个域名都能访问,但容易造成权重分散,从而导致网站权重降低.其实我们可以将访问不带www的域名自动跳 ...