Promise使用方式备忘

使用场景1:

操作A与操作B顺序执行,且操作B依赖操作A的结果。

Service.getPost()  
      .then((res) => {
        Service.getComments()
          .then((res) => {
            // ok
          })
          .catch((err) => {
            // fail to get comments
          });
      })
      .catch((err) => {
        // fail to get post
      });

上面代码描述的是,通过Service.getPost获取帖子信息,成功后再通过Service.getComments获取关于帖子的回复。

总觉得Promise的出现并不能在处理多个顺序执行的异步操作方面上解决Callback陷阱的问题。因为上面代码内容中,嵌套的问题依旧存在。异步操作越多嵌套越深。但是我只知道以这种方式书写,尚未知晓更好地方法。

使用场景2:

操作A与操作B顺序执行,但操作B不依赖操作A的结果。

Storage.getItem('user')  
      .then((user) => {
        let params = {/* ... */};
        if (user.parkId > 0) {
          params.parkId = user.parkId;
        }
        return params;
      })
      .catch(() => {
        let params = {/* ... */}
        return params;
      })
      .then(Service.getPosts)
      .then((res) => {
        // ok to get posts
      })
      .catch((err) => {
        // fail to get posts
      });;

这段代码的可读性比较高。她的作用是通过Storage.getItem读取存储在文件中的用户信息。无论是否成功读取到用户信息,都使用params作为Service.getPosts的参数获取帖子列表。

之所以说这段代码的可读性高,是因为这段代码利用了Promisethencatch方法,链起了前后两个操作。其中getItem的这两个方法均返回了params对象作为下一个(第2个)then的输入参数,也就是传递给了Service.getPosts这个函数。后面就是普通的Promise处理了。

使用场景3:

操作A与操作B并行执行,不需要同步两个操作的返回结果。

Service.getPost()  
      .then((res) => {
        // ok to get post
      })
      .catch((err) => {
        // fail to get post
      });
Service.getComments()  
      .then((res) => {
        // ok to get comments
      })
      .catch((err) => {
        // fail to get comments
      });

因为是并行执行且互相不依赖返回结果。所以Service.getPostService.getComents分别调用即可,不需要嵌套也不需要链接。

使用场景4:

操作A与操作B并行执行,需要同步两个操作的返回结果。

Promise.all([Service.getPost, Service.getComments])  
      .then((res) => { 
        // ok to get post and comments
        // res is an Array contains all result of async operations
      })
      .catch((err) => {
        // fail to get post or comments, or both fail
      });

需要同步异步操作的放回结果可以使用Promise.all方法。该方法只有在参数中的异步操作均成功返回才回调then方法,否则回调catch方法。

ChardLau

继续阅读此作者的更多文章