Promise用法详解

Promise是javascript中异步编程的一种解决方案,和传统的异步编程方案(回调、事件)相比,使用更加简洁,功能更加强大。ES6将其写进了语言标准,统一了语法。

一、Promise入门

1.1 创建

通常在创建Promise的时候,在外层进行一层封装,如下所示。

function runAsync(){
    let p = new Promise((resolve,reject)=>{
        if(/*异步操作成功*/){
            resolve(value);
        }else{
            reject(error);
        }
    })
    return p;
}

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

1.2 then函数

执行runAsync(),并通过then函数实现对异步结果的处理。

//情况1
runAsync()
    .then(data=>{},error=>{})
//情况2
runAsync()
    .then(data=>{})

then函数接收两个参数或一个参数,参数的类型都是函数。
then第一个参数中的data(函数的参数),是resolve(value)中的value值。
同理,then第二个函数中的error,是reject(error)中的error值。

1.3 链式操作的用法

Promise的精髓在于通过管理“状态”,使得回调方法及时调用,代码层次十分的清晰。

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

如上述代码,异步任务1执行成功后,再执行异步任务2,异步任务2成功后,再执行异步任务3。此应用场景下,如果使用回调进行嵌套,层级将十分复杂,不便于代码管理。但是使用Promise后,代码简洁明了。
runAsync()返回的是Promise对象,通过then()函数进行相应操作。如此情况,称作是“链式操作”。

1.4 catch函数

catch函数的作用:

指定reject的回调
捕捉then方法的异常,防止阻塞。

runAsync()
    .then(data=>{})//可能出现异常错误
    .catch(error=>{})

catch函数接收一个参数(参数类型是函数),接收的函数传入一个参数值error,error可能是reject(error)回调函数的error值,即异步操作失败时的回调。
error参数的另一种情况:then函数中,传入的参数代码执行时,出现异常错误,catch将捕获该异常,达到不阻塞线程的目的。此时,error的参数即为该异常错误的string。

二、Promise进阶

2.1 all

Promise的all方法提供了并行多个执行异步操作的能力,并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数,看下面的例子:

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });

其中results是所有resolve(data)的data的数组。

2.2 race

all方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race方法,这个词本来就是赛跑的意思。

Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function(result){
        console.log(result);
    });

可以使用race方法,实现fetch请求的请求超时。

三. Promise的高级使用

下面使用的demo代码是从react-native-fetch-blob截取的部分代码。

function fetchFile(options = {}, method, url, headers = {}, body):Promise {
  ...
  let promise = null
   ...
  let _progress, _uploadProgress, _stateChange

  switch(method.toLowerCase()) {
    ...
    default:
      promise = fs.stat(url) 
      .then((stat) => {
        total = stat.size
        return fs.readStream(url,
          headers.encoding || 'utf8',
          Math.floor(headers.bufferSize) || 409600,
          Math.floor(headers.interval) || 100
        )
      })

       //*******关键代码1************//
      .then((stream) => new Promise((resolve, reject) => {
        stream.open()
        info = {
          state : "2",
          headers : { 'source' : 'system-fs' },
          status : 200,
          respType : 'text',
          rnfbEncode : headers.encoding || 'utf8'
        }
        _stateChange(info)
        stream.onData((chunk) => {

          //*******关键代码2************//
          _progress && _progress(cursor, total, chunk)
          if(headers.noCache)
            return
          cacheData += chunk
        })
        ...
      }))
    break
  }

  //*******关键代码3************//
  promise.progress = (fn) => {
    _progress = fn
    return promise
  }
 ...

  return promise
}

重点看关键代码1、2、3。
关键代码3:给promise添加progress属性,指定_progress回调方法。
关键代码2:指定_progress方法后,回到函数的执行。
关键代码1:创建promise对象。

给promise对象设置添加的属性:

let p = fetchFile(options,method,url,headers,body)
    .progress((cursor, total, chunk)=>{})

p.then(res=>{})
  .catch(error=>{})

扩展:通过delete删除对象属性,如
delete promise['progress']

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

推荐阅读更多精彩内容