由使用request-promise-native想到的异步处理方法

更新日期: 2019-02-17阅读: 4.2k标签: native

问题场景

因为js语言的特性,使用node开发程序的时候经常会遇到异步处理的问题。对于之前专长App开发的我来说,会纠结node中实现客户端api请求的“最佳实践”。下面以OAuth2.0为场景,需要处理的流程:

  1. 获取access token
  2. 使用获取到的token,发起API请求
  3. 处理API数据


处理过程

一开始,我们使用了闭包嵌套闭包的方式实现,形如:

request(options, (res, error)=>{
    //handle res and error
    request(options2, (res2, error2)=>{
        //handle res2 and error2
    })
})


我们可以允许函数的异步执行,但大多数人在思考问题的时候,尤其在解决如上的场景时,还是希望能采用线性地处理方式。于是,我们使用request-promise-native,配合aync/await,类似:

(async ()=> {
    let access = await requestpromise(authoptions).then((value)=>{
        return value;
    }).catch((error)=>{
        return error;
    });
    console.log('access', access);
})();


使用async/await的时候,需要知道:

  1. await不能单独使用,其所在的上下文之前必须有async
  2. await 作用的对象是Promise对象

可以猜想 request-promise-native 必定是对request进行了Promise化,从源代码中可以看到(虽然我没看懂,应该是使用了通用的方法来创建Promise):

// Exposing the Promise capabilities
var thenExposed = false;
for ( var i = 0; i < options.expose.length; i+=1 ) {
    var method = options.expose[i];
    plumbing[ method === 'promise' ? 'exposePromise' : 'exposePromiseMethod' ](
        options.request.Request.prototype,
        null,
        '_rp_promise',
        method
    );
    if (method === 'then') {
        thenExposed = true;
    }
}
if (!thenExposed) {
    throw new Error('Please expose "then"');
}


 既然如此,我们可以构造Promise,交给await。下面就把request包裹成一个Promise:

//token.js
module.exports.getAccessToken =  async (options) => {
    return new Promise(function (resolve, reject) {
        request(options, function (error, res, body) {
          if (!error && res.statusCode == 200) {
            resolve(body);
          } else {
              if(error){
                  reject(error);
              }else{
                reject(body);
              }
          }
        });
    });
};
//app.js
(async ()=> {
    let access = await token.getAccessToken(authoptions).then((value)=>{
        //handle value if requires
        return value;
    }).catch((error)=>{
        return error;
    });
    console.log('access', access);
    //use token to send the request
})();


API成功返回的结果我们往往需要按需处理,这一步放在then函数中进行。因为Promise调用then仍然是Promise,因此这里链式调用的then和catch。 

进一步地,我们尝试使用内置模块 util 对函数进行promise化,形如:

//token.js
const request = require('request');
const {promisify} = require('util');
const requestPromise = promisify(request);
module.exports.getAccessToken =  async (options) => {
    return requestPromise(options);
};
//app.js
(async ()=> {
    let access = await token.getAccessToken(authoptions).then((value)=>{
        //handle value if requires
        return value;
    }).catch((error)=>{
        return error;
    });
    console.log('access', access);
    //use token to send the request
})();


说了这么多,对我而言,目前最大的收获就是理解了如何使用Promise/async/await,把异步函数顺序执行:把带有闭包的函数包裹进Promise,然后使用async/await执行该Promise。

好了,以上是我解决此类问题的思路。我相信必然还有其他优雅的解决方式,甚至是最佳实践。今天,借此机会,抛砖引玉,希望大家能够不吝赐教。


Promise 内容复习

最后,容我温习一下Promise相关的内容,有片面的地方请大家指正。
Promise对象:

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.  

Promise有三种状态: 初始状态,执行成功,执行出错。 then()表示promise执行后的进一步处理,它可以带两个callback参数:第一个用于promise成功运行后执行,第二个表示promise运行失败后执行。catch()表示promise运行失败后所执行的工作。catch()可以理解为语法糖,当then()的第二个callback参数省略的时候,意味着需要调用catch(因为未处理的失败的promise在将来某个node版本会导致程序退出)。需要注意的是,then()/catch()方法也是返回Promise,因此可以链式调用。


来自:https://www.cnblogs.com/scorpiozj/archive/2019/02/16/10388912.html


链接: https://fly63.com/article/detial/2042

来聊聊怎么写react-native上的样式吧

在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写css一样的去书写我们的样式。

WKWebView 里 JS 和 native 通信的例子

初始化 wkwebview,设置 message handler,native 端注册了 testecho 的messageHandler,实现 WKScriptMessageHandler协议,执行JS 代码 ,所以 JS 可以通过 window.webkit.messageHandlers.testecho.postMessage 来回调客户端,和文档中说的一样

React Native项目使用react-apollo实现更新缓存的两种方式

GraphQL是一个API查询语言,他可以将使用PostgreSQL写的server代码自动生成Query或者Mutation,非常的方便。而Apollo Client就是一个强大的JavaScript GraphQL客户端。对于cache,在Apollo Client中有着强大的管理策略。

11个React Native组件库

React Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。根据大众的需求,我们列出了一个有用的React-Native UI库列表,可以帮助你更好地入门React Native。

React Native 传参的几种方式

在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家

如何正确选型,React Native 还是 Native?

随着 H5 标准的发布以及推广,使得移动应用的开发也受到了很大影响,出于效率、成本等原因,移动应用的开发不再完全依赖于 “原生”。近日越发火热的混合应用(Hybrid App)介于 Web 应用和原生应用之间

react-native报错Cannot get property packageName on null object

react-native打包安卓apk的时候,报错Cannot get property packageName on null object,完全没有头绪,研究了半天才发现竟然是因为package.json里面scripts自定了命令导致的,无法理解为何会影响安卓打包并且报错packageName null

React Native 添加 Redux 支持

之前写的项目都是人家编写好的脚手架,里面包含项目所需的环境文件,但由于有些东西用不到打包增加软件体积,所以自己从头搭建个环境。是基于 Native Base + react-navigation + Redux 的 React Native 脚手架,现在项目环境如下

Flutter platform view 使用篇

Flutter作为备受关注的跨平台的开发框架,长远来看,前景肯定是比较好的,在其基础组件还未完善与成熟之前,能够高效的复用现有的native组件,是比较合适的方案。官方提供了Plugin的方式,允许将一个成熟的native组件(比如mapview)

JSBridge 初探

近些年,移动端普及化越来越高,开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点,为了满足业务的需要,公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地,看起来无法联系,那么如何才能让双方协同实现功能呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!