【React Native】Promise的简单使用

因为在学习React Native之前我是做iOS开发的,所以基本上没有js的基础,很多东西也只能现学现用。在整个项目中,很多时候我们需要处理一些异步耗时操作,在处理完成之后回调到主逻辑当中,这里我用到的就是Promise。


介绍一下Promise

在ES6中原生提供了 Promise 对象。所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点:

(1)Promise对象的状态不会受到外界操作的影响。Promise有三种状态:Pending、Resolved和 Rejected,下面会具体介绍。只有等异步操作结束,得到操作结果后,由Promise根据结果决定自身是什么状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点:

(1)无法取消 Promise,一旦新建它就会立即执行,无法中途取消。
(2)如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。
(3)当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

简单的使用

Promise有三种状态:

Pending:进行时,但是无法知道处理进度,只能知道目前是在处理这次异步操作;
Resolved:已完成,又称 Fulfilled,表示异步操作结果正确回调方法;
Rejected:已失败,表示处理中途抛出异常,或者处理结果不正确回调方法;

var promise = new Promise((resolve, reject) =>{
  //这里是异步处理方法,最终得到data结果,
  //然后根据data的status属性决定处理结果是否正确。
  if(data.status == true){
    resolve(data);
  }else{
    reject(error);
  }
});

可以有两种方式操作promise回调方法:

promise.then((data)=>{
  //这里处理resolve回调方法
},(error)=>{
  //这里处理reject回调方法
});

或者像这样:

promise.then((data)=>{
  //这里处理resolve回调方法
}).catch((error)=>{
  //这里处理reject回调方法
});

推荐第二种方法,因为在promise内部异步操作抛出异常时,或者resolve回调方法抛出异常时,都会执行catch方法。而第一种方法,如果在resolve方法中处理出现异常,就无法正确处理。

用Promise封装一个HTTP/HTTPS轮子

很多时候需要自己封装一些方便程序开发的轮子,这里简单介绍一下我利用Promise简单封装的一个HTTP/HTTPS网络请求的轮子。
  因为React Native还在成长期,很多相关的第三方库还没有跟上来,比如在HTTP/HTTPS请求库中,iOS有大家都在用的AFNetworking,Android有okhttp。这里我就是简单地使用了javascript提供的fetch方法。

static get(url){
  return new Promise((resolve, reject) =>{
    fetch(url).then((response)=>response.json())
    .then((responseData) => {
    if(responseData.c && responseData.c == 10000){
      resolve(responseData.d);
    }else{
      reject(new Error(responseData.d));
    }
    }).catch((error) => {
      reject(new Error('网路异常'));
    }).done();
  });
}
GSHttpUtil.get('http://yourhost/...').then((data)=>{
  //正确请求的业务逻辑
}).catch((error)=>{
  //处理请求失败业务逻辑
}).done();

虽然只是个简单的封装,但是可以根绝自己的业务需求,在这里对url进行统一的操作,比如服务器地址的统一更换,因为开发中很多时候测试环境和正产环境的服务器地址通常是不一样的。还可以对返回的参数进行统一的是否正确的判断。也有利于以后对网络请求库的统一更换。

Promise chain

因为Promise在执行then或者catch方法时会再返回一个Promise对象,所以是可以再次执行then或者catch方法的,所以Promise还可以写成方法链的形式:

taskA() { 
  console.log("Task A");
}
taskB() { 
  console.log("Task B");
}
onRejected(error) { 
  console.log("Catch Error: A or B", error);
}
finalTask() { 
  console.log("Final Task");
}
var promise = Promise.resolve();
promise .then(taskA).then(taskB).catch(onRejected).then(finalTask);

前面例子中的Task都是相互独立的,只是被简单调用而已。这时候如果 Task A 想给 Task B 传递一个参数该怎么办呢?答案非常简单,那就是在 Task A 中 return的返回值,会在 Task B 执行时传给它。

我们还是先来看一个具体例子吧。

doubleUp(value) { 
  return value * 2;
}
increment(value) { 
  return value + 1;
}
output(value) { 
  console.log(value);// => (1 + 1) * 2;
}
var promise = Promise.resolve(1);
promise.then(increment)
.then(doubleUp)
.then(output)
.catch(function(error){ 
  // promise chain中出现异常的时候会被调用 console.error(error); 
});

这段代码的入口函数是 Promise.resolve(1);,整体的promise chain执行流程如下所示。

(1)Promise.resolve(1);传递 1 给 increment函数;
(1)函数 increment对接收的参数进行 +1 操作并返回(通过return);
(3)这时参数变为2,并再次传给 doubleUp;
(4)最后在函数 output中打印结果;

如果想then或者catch方法后不再有链式方法可以在最后增加一个done()方法,这个方法不会再返回Promise对象,也就无法再增加执行then或者catch方法了。

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

推荐阅读更多精彩内容

  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,296评论 6 19
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,127评论 0 12
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,348评论 0 19
  • Promise的含义:   Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,164评论 0 16
  • 不要害怕欠人情会耗光你的社会资源,欠人情根本不会伤资源,不联系才会真正耗光你的资源。
    姚钱树s阅读 274评论 0 0