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. ...
随机推荐
- Glide终于解决了同时绑定多个webp格式图片的问题
前端时间,要给项目换个图片加载的库,使用Glide 3.7版本进行测试, 发现在快速滑动列表(每个item都会加载一个app的图标,采用webp格式,即同时加载多个webp格式)的时候,一屏至少有2- ...
- java写桌面程序
一:使用java swing开发窗口程序 简述: 1.文章内容主要是使用java swing类库开发一个小的窗口程序,然后使用exe4j发布成exe可以安装的程序,让初学者对使用java来做pc软件开 ...
- 理解JAVA的IO
1. 什么是流Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序列 ...
- Eclipse SVN clean up失败解决方法
错误信息: 1.下载sqlite3.zip (https://www.sqlite.org/2019/sqlite-tools-win32-x86-3270200.zip) 只需用到解压后的exe文 ...
- Unity应用架构设计(2)——使用中介者模式解耦ViewModel之间通信
当你开发一个客户端应用程序的时候,往往一个单页会包含很多子模块,在不同的平台下,这些子模块又被叫成子View(视图),或者子Component(组件).越是复杂的页面,被切割出来的子模块就越多,子模块 ...
- Python 爬虫实例（8）—— 爬取 动态页面
今天使用python 和selenium爬取动态数据,主要是通过不停的更新页面,实现数据的爬取,要爬取的数据如下图 源代码: #-*-coding:utf-8-*- import time from ...
- 企业级镜像仓库Harbor
介绍: Habor是由VMWare公司开源的容器镜像仓库.事实上,Habor是在Docker Registry上进行了相应的企业级扩展,从而获得了更加广泛的应用,这些新的企业级特性包括:管理用户界面, ...
- Tomcat线程池的深入理解
1.工作机制: Tomcat启动时如果没有请求过来,那么线程数(都是指线程池的)为0: 一旦有请求,Tomcat会初始化minSpareThreads设置的线程数: 2.线程池作用: Tomcat的线 ...
- Atitit 华为管理者内训书系 以奋斗者为本 华为公司人力资源管理纲要 attilax读后感
Atitit 华为管理者内训书系 以奋斗者为本 华为公司人力资源管理纲要 attilax读后感 序 言上篇:价值创造.评价与分配第一章 全力创造价值1.1 围绕价值创造展开人力资源管理1.1.1 什 ...
- Win10正式企业版激活方法
Win10正式企业版激活方法 在正式开始激活Win10正式企业版系统之前,我们需要先查看一下当前Win10正式企业版系统的激活状态: 右击桌面左下角的“Windows”按钮,从弹出的右键菜单中选择“控 ...