先看一个有意思的题目:
- setTimeout(() => console.log('a'), 0);
- var p = new Promise((resolve) => {
- console.log('b');
- resolve();
- });
- p.then(() => console.log('c'));
- p.then(() => console.log('d'));
- console.log('e');
js 运行机制
运行结果为: b, e, c, d, a
Promise 的前世今生:
Js 默认是以单线程运行的, 猿们为提升单线程的运行效率, 最终设计了 Js 异步的处理方式
但异步的方式使得程序语句的执行顺序变得混乱 (程序可能会先 "把大象装冰箱", 然后 "把冰箱门打开", 冰箱很不乐意...), 所以程序猿们使用回调函数的方式来解决问题 (只有 "把冰箱门打开" 之后, 才能执行 "把大象装冰箱" 的操作)
但回调函数的可读性依然很差, 为了解决回调函数易读性的问题, jquery 封装了一套 jquery-deffered 语法来简化回调函数后来程序猿们感觉 jquery-deffered 很好用, 就将原来的 jquery-deffered, 改良为 Promise 语法, 经过程序猿们的努力, Promise 已成为 ES6 的标准语法!
Promise 的设计艺术
创建 new Promise 对象, return 返回这个对象
给 Promise 对象传入一个函数, 函数的参数为 resolve reject
成功则执行 resolve() 失败则执行 reject()
then() 监听结果
- // 函数整体比较复杂, 声明了 "成功" 和 "失败" 的处理函数
- function AddImage(imgSrc) {
- var myPromise = new Promise(function(resolve, reject) {
- var newImage = document.createElement('img');
- newImage.src = imgSrc;
- // 如果图片成功加载了, 执行 resolve 函数
- newImage.onload = function() {
- resolve(newImage);
- };
- // 如果图片加载失败执行 reject 函数
- newImage.onerror = function() {
- reject("嘿嘿, 出错了");
- };
- });
- return myPromise;
- }
- var p = AddImage("https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png")
- // 传入两个函数 (成功执行第一个, 失败执行第二个)
- p.then(function resolve(newImage) {
- console.log("图像的宽度为:", newImage.width);
- },
- function reject(info) {
- console.log(info);
- });
- // 传入一个函数 (成功执行函数 resolve, 失败则不执行)
- p.then(function resolve(newImage) {
- console.log("图像的高度为:", newImage.height);
- });
来源: http://www.jianshu.com/p/9901286d1653