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. ...
随机推荐
- self.location.href
self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 ...
- python接口自动化测试(六)-unittest-单个用例管理
前面五节主要介绍了环境搭建和requests库的使用,可以使用这些进行接口请求的发送.但是如何管理接口案例?返回结果如何自动校验?这些内容光靠上面五节是不行的,因此从本节开始我们引入python单元测 ...
- npm run dev
npm run dev npm run build
- InfluxDB meta文件解析
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 influxdb默认配置: /etc/influxdb/infl ...
- IIS 重写 HTTP 重定向到 HTTPS
1.购买SSL证书 2.IIS7 / IIS 7.5 下绑定 HTTPS 网站(购买Wildcard SSL泛域名证书可绑定多个子域名)参考上文 3.下载安装URL重写模块:Microsoft URL ...
- TFS online build change web.config
概要 TFS online 自动编译时如何修改web.config ref:https://dustinoprea.com/2016/05/06/using-tokenization-token-re ...
- Effective Java 第三版——79. 避免过度同步
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- mysql存储过程详解 mysql存储过程和函数
第20章:存储程序和函数 目录 20.1. 存储程序和授权表 20.2. 存储程序的语法 20.2.1. CREATE PROCEDURE和CREATE FUNCTION 20.2.2. ALTER ...
- python 模块学习
一.from django.contrib.auth.hashers import make_password 通过函数名即可发现,主要有两个函数,分别是创建密码和验证 用法 ps = " ...
- Android触摸事件(一)-TouchEventHelper
文件夹 文件夹 概述 关于更新 2016-08-31 2016-06-20 关于单点触摸事件singleTouch 单击的两种方式 关于双击事件 双击事件的检測逻辑 双击事件触发的时机 关于多点触摸事 ...