浅谈Promise

Promise是异步编程的一种解决方案,可以帮助我们解决回调地狱的问题,网络上有很多这方面的教程,但都很晦涩难懂,本文尽可能让大家更容易的理解promise
文章开始前先问大家一个问题,烧一壶水需要10分钟,煮饭需要30分钟,扫地需要5分钟、那么妈妈让小明烧水煮饭而且把地扫干净需要用多少分钟呢?
压根不用想就知道是30分钟、烧水的同时也可以煮饭也可以扫地、我们只需要等水烧开时把火关掉就可以了

ES6规定,Promise对象是一个构造函数,用来生成Promise实例。

基本使用

1.我们直接上代码,看看运行结果

var Obj=new Promise(function(){
    console.log("hello 凯旋");
});
//hello 凯旋

Promise构造函数接受一个函数当做参数,而且创建后会立即执行这个函数

2.有了对上面那些粗浅的认识,我们现在就可以完成一个回调的案例(这只是我的一个恶趣味(逃····)
有三个方法t1、t2、t3 ,要求 t1执行完后执行t2,t2执行完后执行t3

//正常来说是这样去做 t1(t2(t3))
function t1(){
    console.log("老子是t1");
    return new Promise(t2);
}
function t2(){
    console.log("老子是t2");
    return new Promise(t3);
}
function t3(){
    console.log("老子是t3");
}
new Promise(t1);//依次执行 t1、t2、t3 

这个案例就是借助了 Promise创建后会立即执行这个特点 接下来我们开始正经的说说Promise

3.上面说了Promise构造函数接受一个函数当参数 也就是这样

var Obj=new Promise(function(){});

但其实这个函数也接收两个参数

var promise = new Promise(function(resolve, reject) {})

这两个参数分别是resolve和reject。它们是两个函数,这俩函数是JavaScript引擎提供的,不用咱们自己管。
那么他们是干啥的,我们看案例

var promise = new Promise(function(resolve, reject) {
    setTimeout(function(){
        resolve("我是数据");
    },3000);
})
promise.then(function(data){
    console.log(data);
});

运行后发现 三秒后会打印 我是数据 那么这是咋回事呢
Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

上面的字好长啊,实际浓缩一下就是这样 我们调用 resolve这个方法的时候 就说明我们这个操作完成了 它会触发promise.then这个方法 这个方法实际上也有俩参数(可以只写一个),也是俩函数,第一个是 当执行resolve后 调用的,第二个是执行reject时候调用的, 这俩函数的参数就是调用resolve和reject时传过来的值

4.来看个案例吧 这么多字写的我也头疼

var promise = new Promise(function(resolve, reject) {
    setTimeout(function(){
        reject("我是错误");
    },3000);
})
promise.then(function(data){
    console.log(data);
},function(error){
    console.log(error)
});

上面代码就会打印出 我是错误
5.then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行

var promise = new Promise(function(resolve, reject) { 
    console.log('Promise'); resolve();
});
promise.then(function() { 
    console.log('Resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// Resolved

6.then的链式操作 案例


function t1() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t1");
    }, 1000);
    });
    return promise;
}
function t2() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t2");
    }, 1000);
    });
    return promise;
}
function t3() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t3");
    }, 1000);
    });
    return promise;
}
t1().then(function(data) {
    console.log(data);
    return t2();
}).then(function(data) {
    console.log(data);
    return t3();
}).then(function(data) {
    console.log(data);
});

每一次调用then必须返回一个新的promise来实现这个链式调用

catch

其实它和then的第二个参数一样,用来指定reject的回调

function t1() {
    var promise = new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject("出错了");
        }, 1000);
  });
  return promise;
}
t1().then(function(data) {
    console.log(data);
    return t2();
}).catch(function(error){
    console.log(error)
 }
);
我们没有指定reject回调的时候 就执行它 它还有个功能就是 假设我们执行了resolve的回调 里面出错了 它不会中断执行 而是进入catch 

all与race

1.arr的基本使用

function t1() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t1");
    }, 1000);
    });
    return promise;
}
function t2() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t2");
    }, 2000);
    });
    return promise;
}
function t3() {
    var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("t3");
    }, 3000);
    });
    return promise;
}
Promise.all([t1(), t2(), t3()]).then(function(results) {
    console.log(results);
});
//["t1", "t2", "t3"]

其实就是等所有的异步操作做完,才执行when 而且返回的是个数组(所有异步操作的)
race与all不同之处就是在于 谁先完成这个异步操作,谁就执行when操作 返回的是最先完成异步操作的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容

  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,305评论 6 19
  • 一直都有听说promise,但是之前都没有用过,经过查阅了相关的资料后,想自己总结一下promise。 1.pro...
    小梁姐姐阅读 555评论 0 1
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,133评论 0 12
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,358评论 0 19
  • 1. 什么是线程安全? 多个线程在访问同一个对象的时候不需要其他额外的同步手段或措施就能保证该对象被正确的访问并产...
    蛮大人我们走阅读 368评论 0 0