Promise 异步执行的同步操作
Promise 是用来执行异步操作的。
但有时一个异步操作需要等其他的异步操作完成,这时候就可以使用then来做。
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
var image = new Image(); image.onload = function() {
console.log("load");
resolve(image);
}; image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
console.log("change src");
function init_img() {
image.src = url;
}
setTimeout(init_img,2000);
});
}
loadImageAsync 用来异步加载图片. setTimeout 人为地延迟2秒加载
function loadImageAsync2(url) {
return new Promise(function(resolve, reject) {
var image = new Image(); image.onload = function() {
console.log("2load");
resolve(image);
}; image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
console.log("2change src");
function init_img() {
image.src = url;
}
setTimeout(init_img,1000);
});
}
loadImageAsync2 也是用来加载图片,人为地延迟1秒。
var p = loadImageAsync('http://img02.tooopen.com/images/20141231/sy_78327074576.jpg');
p.then(function (img) {
console.log("1:"+img.src);
});
var h = loadImageAsync2('http://img02.tooopen.com/images/20141225/sy_77944235469.jpg');
h.then(function (img) {
console.log("2:"+img.src);
});
console.log("jjjjj");
第一种调用方式,分别创建promise 实例 p 和 h。
调用结果:
可以看到 图片2先加载, 然后加载图片1 。
var s = loadImageAsync('http://img02.tooopen.com/images/20141231/sy_78327074576.jpg');
s.then(function (img) {
console.log("1:"+img.src);
return loadImageAsync2('http://img02.tooopen.com/images/20141225/sy_77944235469.jpg');
}).then(function (img) {
console.log("2:"+img.src);
});
创建新的promise 对象 s. 我们在s 的then 成功回调函数中 去调用 loadImageAsync2 函数。
这样就保证了 加载图片2 之前先加载图片1.
这里注意的是第二个then 其实是loadImageAsync2 返回的promise 实例调用的。
Promise相关学习链接:http://es6.ruanyifeng.com/#docs/promise
Promise 异步执行的同步操作的更多相关文章
- asap异步执行实现原理
目录 为什么分析asap asap概述 asap源码解析-Node版 参考 1.为什么分析asap 在之前的文章 async和await是如何实现异步编程? 中的浅谈Promise如何实现异步执行小节 ...
- Promise then中回调为什么是异步执行?Promise执行机制问题
今天发现一个问题,看下方代码 let p = new Promise(function(resolve, reject) { resolve() console.log('); }); p.then( ...
- 学习Promise异步编程
JavaScript引擎建立在单线程事件循环的概念上.单线程( Single-threaded )意味着同一时刻只能执行一段代码.所以引擎无须留意那些"可能"运行的代码.代码会被放 ...
- 超耐心地毯式分析,来试试这道看似简单但暗藏玄机的Promise顺序执行题
壹 ❀ 引 就在昨天,与朋友聊到JS基础时,她突然想起之前在面试时,遇到了一道难以理解的Promise执行顺序题.由于我之前专门写过手写promise的文章,对于部分原理也还算了解,出于兴趣我便要了这 ...
- Js中强大的Promise异步机制
少年别激动 我的这份随笔里面只涉及promise概念 如果想深入了解Promise的用法 可以去阮老师es6入门里面详读 奉上链接 http://es6.ruanyifeng.com/#docs/pr ...
- ES6笔记(7)-- Promise异步编程
系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...
- 【ES6】Generator+Promise异步编程
一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...
- 8张图让你一步步看清 async/await 和 promise 的执行顺序
摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...
- 8 张图帮你一步步看清 async/await 和 promise 的执行顺序(转)
https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...
随机推荐
- 如何安装CocoaPods
转自 http://www.99css.com/1321/ 在 iOS 项目开发中,经常会用到第三方的源代码,CocoaPods 就是为了方便管理这些源码的工具. 在官方教程里面,安装看起来非常简单 ...
- HTML5新增的一些属性和功能之八——web Worker
Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...
- 使用PLSql连接Oracle时报错ORA-12541: TNS: 无监听程序
非常多时候为了优化我们的启动项把oracle的服务禁止了.但是重新启动启动之后使用PLSQL登陆oracle时会出现无监听程序,这说明我们有一些服务没有启动.我们先查看一下oracle的服务是否启动, ...
- Dynamics CRM 常用 C# 方法集合
Plugin(C#) 分派 AssignRequest assign = new AssignRequest(); assign.Assignee = prEntity["ownerid&q ...
- datatable列操作
DataTable myDt =dt; //删除列 myDt.Columns.Remove("minArea"); myDt.Columns.Remove("max ...
- arc engine - IName
IName对象是一个代表性对象.通过使用IName对象,可以访问它所代表的对象的一些基本属性,而不用将整个对象调入内存.我们用IWorkspace 获得一个Workspace,那可是会调入内存的,而I ...
- Java这个名字怎么来
Java语言的历程丰富多彩,被现在众多程序员和企业广泛使用,不用质疑这是Java的领先技术的结果. Java是Sun公司开发的一种编程语言,Sun公司最初的方向是让Java来开发一些电器装置程序, ...
- linux shell脚本连接oracle查询数据插入文件和日志文件中
#!/bin/sh sqlplus "用户名/密码@数据库"<<EOF 或者只有一个库的 :sqlplus "用户名/密码"<<EOF ...
- 华为oj - 统计大写字母个数
练手而已. 给初学者参考 #include <stdio.h> #include <string.h> int main(void) { char string[200]={' ...
- objective-C nil,Nil,NULL 和NSNull的小结
nil用来给对象赋值(Object-C的任何对象都属于id类型),NULL则给任何指针赋值,NULL和nil不能互换,nil用于类指针赋值(在Object-C中类是一个对象,是类的meta-class ...