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. ...
随机推荐
- 深度残差网络（DRN）ResNet网络原理
一说起“深度学习”,自然就联想到它非常显著的特点“深.深.深”(重要的事说三遍),通过很深层次的网络实现准确率非常高的图像识别.语音识别等能力.因此,我们自然很容易就想到:深的网络一般会比浅的网络效果 ...
- StompJS使用文档总结
STOMP即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP ...
- 时间>金钱
时间>金钱! 如果有机会,用你的金钱去换取别人的成功经验,一定要抓住一切机会向顶尖人士学习. 仔细选择你接触的对象,因为这会节省你很多时间. 假设与一个成功者在一起,他花了10年时间成功,你跟1 ...
- 关于IP，这里有你想知道的一切！
关于IP,这里有你想知道的一切! 原创: 同盾反欺诈研究院 先知安全技术社区 2017-07-13 今日,就来跟大家聊聊关于IP地址方方面面的研究,其实可以归到三个问题上: 1.这个IP在哪儿? 2. ...
- Mongodb: Sort operation used more than the maximum 33554432 bytes of RAM
上线许久的产品突然爆出了一个Mongodb 查询的BUG,错误如下: "exception":"org.springframework.data.mongodb.Unca ...
- Win10系统的SurfacePro4无法修改启动顺序怎么办
必须要把底部的开关关闭,否则启动顺序无法修改
- [Python设计模式] 第21章 计划生育——单例模式
github地址:https://github.com/cheesezh/python_design_patterns 单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式 ...
- PHP类中self和$this的区别
1.self代表类,$this代表对象2.能用$this的地方一定使用self,能用self的地方不一定能用$this静态的方法中不能使用$this,静态方法给类访问的. 今天在使用静态方法的时候,使 ...
- iOS实现图片裁剪功能，基于TKImageView完善与讲解
1.功能需求:需要实现图片区域裁剪功能. 2.效果图: 3.实现原理:本来想自己实现的,刚好看到一个比较好的库:TKImageView,下载好研究了下,发现基本都能满足我的需求,而且封装的也比 ...
- Python性能分析
Python性能分析 https://www.cnblogs.com/lrysjtu/p/5651816.html https://www.cnblogs.com/cbscan/articles/33 ...