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. ...
随机推荐
- 【Jenkins】新版本的特性：自定义流水线
#!/usr/bin/env groovy pipeline { agent none stages { stage('stage-01') { agent { label 'master' } st ...
- angularjs $$phase
https://segmentfault.com/q/1010000000738004/a-1020000000738812 $$phase 是 angluar 内部使用的状态标志位,用于标识当前是否 ...
- CSAPP Tiny web server源代码分析及搭建执行
1. Web基础 webclient和server之间的交互使用的是一个基于文本的应用级协议HTTP(超文本传输协议). 一个webclient(即浏览器)打开一个到server的因特网连接,而且请求 ...
- manjaro折腾手记
以前装过Arch,有点折腾,写了个hello world就卸载了.没用过AUR,甚至也没去了解. 听说manjaro继承Arch,几乎开箱即用,对硬件支持非常好,源里面的软件更新非常快.但是没有装中文 ...
- 微信SDK登录无法调起，微信SDK无法接收回调的几种解决办法
今天有位同事请求帮忙调试微信登录问题,他遇到了以下2个问题,所以,写篇日志备忘,如果有其它朋友遇到此类问题,都可以照此解决! 平时在开发中,有些开发者经常会遇到微信登录SDK登录时,无法调起微信客户端 ...
- 使用 Docker 镜像构建 GO 语言环境
1. 安装 Docker 我当前使用的系统环境是 CentOS7 ,安装 Docker 使用的命令是 yum install docker*.至于其它系统,可以到百度查找其对应的安装方式. 2. 配置 ...
- Jquery DataTables 获取表格数据及行数据
注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
- 物联网架构成长之路(28)-Docker练习之MQ中间件(Kafka)
0. 前言 消息队列MQ,这个在一般的系统上都是会用到的一个中间件,我选择Kafka作为练手的一个中间件,Kafka依赖Zookeeper.Zookeeper安装上一篇博客已经介绍过了. 1. Kaf ...
- .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理
/// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...