浅谈Promise

背景:

最近项目在做小程序的开发,涉及设计一个统一的登录公共方法,当实现时涉及到多个异步请求,那么问题来了,如何让多个异步请求先后同步进行呢?很多人会想到使用多层嵌套套来实现,就像这样:

function fun1() {
    fun2() {
        fun3() {
            fun4() {
            }
        }
    }
}

可是嵌套难以维护而且耦合性很高、不方便。

苦寻百度,最后找到Promise,Promise就是这样一个专门解决多个异步请求问题的对象。

Promise

介绍

Promise是异步编程的一种解决方案,由社区提出,经ES6规范了标准,因此原生提供Promise。在浏览器中输入以下语句,看是否支持Promise,当然也可以使用Can I Use查一查兼容性

'use strict';//严格模式
new Promise(function () {});

理解

先从最基本的案例去了解一下Promise的用法。首先是基本嵌套使用:

//嵌套调用
function fun1() {
    console.log('执行fun1');
    //设置时间把fun1看作为异步方法
    setTimeout(function() {
        //...fun1执行完毕
        fun2();
    },2000);
}
function fun2() {
    console.log('执行fun2');
}
fun1();

结果:
执行fun1
执行fun2

为了保证fun1执行完再调用fun2,一般我们会使用嵌套调用,待fun1完全执行再调用fun2。那Promise是怎样的思路呢?

function fun1() {
    return new Promise(function(resolve,reject) {
        console.log('执行fun1');
        //设置时间把fun1看作为异步方法
        setTimeout(function() {
            //...fun1执行完毕
            resolve();
        },2000);
    });
}
function fun2() {
    console.log('执行fun2');
}

fun1().then(function(res) {
    fun2();
}).catch(function(res) {
    console.log("出错了");
});

结果:
执行fun1
执行fun2

当使用Promise解决异步时,思路会不一样,它是把未来结束的结果暴露出去(resolve),那么我们就可以继续同步(then)执行我们接下想做的事情(fun2),这就是Promise解决异步编程的基本思路。

概括来说,Promise对象就是一个容器(对象)包含了一些未来会结束的事件的结果。

特点

Promise包含了三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。而且只能从pending->fulfilled或者pending->和rejected,理解起来如下图:

状态.png

常规用法

在帮公司写小程序时,总结出一个比较通用的Demo解决异步编程问题:

 function fun1() {
    return new Promise((resolve, reject) => {
        // ... some code

      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
 }

 function fun2() {
    return new Promise((resolve, reject) => {
        // ... some code

      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
 }

 fun1().then(function (res) {
    return fun2();
    if (/*需要中止*/) {
        var res = {'code':0};
        return Promise.reject();//通过reject直接跳到catch
    }
}).then(function (res) {
    //最后的事情...
}).catch(function (res) {
    if (res.code != 0) {
        //错误时执行的代码
    }
});

首先我们定义一个异步方法,一般方法都会有两个状态成功和失败,比如ajax,那么我们可以成功是执行resolve,失败时执行reject,这样我们通过结果来操作下一步。

那好啦,接着我们写方法的整体流程,通过then和catch方法来捕捉方法执行后的结果。then方法可以保证代码顺序地执行,应该可以有多个;而catch一个就够了,就是用来捕捉错误(有点像try...catch),但是还有另外一种用法,就是通过在then中写如上的代码,就可以达到中止的效果,我的思路就是通过reject一个code到catch中,这样就可以判断到底你是中止还是错误了。

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

推荐阅读更多精彩内容