前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6中的Promise对象作用

ES6中的Promise对象作用

作者头像
前端_AWhile
发布2019-08-29 13:15:13
8110
发布2019-08-29 13:15:13
举报
文章被收录于专栏:前端一会

在JS开发中,异步函数是一个绕不过去的坎,要想写出优雅适用的js代码,把异步函数的使用技巧掌握透是必须的。

在es5版本中,异步函数的使用受原生API支持较少影响,好用的方法不多,笨办法可以写出个回调嵌套,在回调嵌套1 2层还好,多了就变成回调地狱了,那种代码的恶心程度,真是不忍直视,比如:

代码语言:javascript
复制
 1//Nodejs 代码
 2connection.query(sql, (err, result) => {
 3    if(err) {
 4        console.err(err)
 5    } else {
 6        connection.query(sql, (err, result) => {
 7            if(err) {
 8                console.err(err)
 9            } else {
10                ...
11            }
12        })
13    }
14})

这种代码既难看,又难维护,过段时间如果业务逻辑稍有变动,改动起来就是真恶心了。并且它对异常的捕获也无法支持,找个bug实在令人烦躁。

怎么办?在没有提供原生支持的情况下,只能借助设计模式在尽量写出优雅的js代码,常用的比如发布订阅模式。这就是我非常喜欢用的一种设计模式。

下面给出我常用的发布订阅模式的对象封装:

代码语言:javascript
复制
 1/**
 2 * 发布订阅对象
 3 * @param {*} obj   //需要装载发布订阅功能的初始对象
 4 */
 5var observer = function(obj){
 6
 7    //定义发布订阅对象
 8    var ObserverEvent = (function(){
 9        var cacheList = {},     //缓存列表,存放订阅者的回调函数
10            listen,             //添加订阅方法
11            trigger,            //发布消息
12            remove;             //取消订阅方法
13
14        listen = function(key, fn){
15            if(!cacheList[key]){        //如果还没有订阅过此类消息,给该类消息创建一个缓存列表
16                cacheList[key] = []
17            }
18
19            cacheList[key].push(fn)     //订阅的消息添加进消息缓存列表
20        }
21
22        trigger = function(){
23            var key = Array.prototype.shift.call(arguments),     //取出消息类型
24                fns = cacheList[key];       //取出该消息对应的回调函数集合
25
26            if(!fns || fns.length==0){      //如果没有订阅该消息,则返回
27                return false;
28            }
29
30            for(var i=0; i<fns.length; i++){
31                fns[i].apply(this, arguments)
32            }
33        }
34
35        remove = function(key, fn){
36            var fns = cacheList[key]
37
38            if(!fns || fns.length==0){      //如果key对应的消息没有被订阅,则直接返回
39                return false;
40            }
41
42            if(!fn){
43                fns.length=0
44            }else {
45                for(var l=fns.length-1; l>=0; l--){
46                    var _fn = fns[l]
47                    if(_fn == fn){
48                        fns.splice(l, 1)
49                    }
50                }
51            }
52        }
53
54        return {
55            cacheList: cacheList,
56            listen: listen,
57            trigger: trigger,
58            remove: remove
59        }
60    })()
61
62    //定义发布对象安装函数,这个函数可以给所有的对象动态安装发布-订阅功能
63    var installEvent = function(obj){
64        for(var i in ObserverEvent){
65            obj[i] = ObserverEvent[i]
66        }
67    }
68
69    return installEvent(obj);   //为该对象装载发布订阅功能
70}

直接向observer函数中传递一个空白对象obj即可(obj对象自定义自行命名),obj对象通过for in方法继承了发布订阅对象ObserverEvent的属性与方法,这样在项目中的一个页面上都可以以这个obj对象作为页面数据对象,进行事件的订阅与触发。尤其是如果页面ajax使用较多且数据互相依赖时,使用发布订阅模式进行数据获取与DOM操作,非常舒服。

除了善用设计模式提高代码优雅程度外,es6原生提供的Promise对象也为异步函数回调提供的比较优雅的解决方案。它把原来的嵌套回调变成了级联调用,很好的解决回调地狱的问题。

以下关于Promise对象的解释内容引用自《ES6标准入门》,感谢大神阮一峰的布道。

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

代码语言:javascript
复制
1const promise = new Promise(function(resolve, reject) {
2  // ... some code
3
4  if (/* 异步操作成功 */){
5    resolve(value);
6  } else {
7    reject(error);
8  }
9});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。 resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。 Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

代码语言:javascript
复制
1promise.then(function(value) {
2    //resolved状态回调函数
3  // success
4}, function(error) {
5    //rejected状态的回调函数
6  // failure
7});

Promise新建后会立即执行,所以首先输出的是Promise,然后是同步任务执行的结果,然后才是异步回调函数的结果。

代码语言:javascript
复制
 1var timeout = function(ms){
 2    return new Promise(function(resolve, reject){
 3        console.log(2355);
 4        setTimeout(resolve, ms, 'done')
 5    })
 6}
 7
 8timeout(2000).then(function(data){
 9    console.log(data);
10})
11
12console.log('Hi)
13
14//立即打印
152355
16'Hi'
17//2秒后打印
18'done'
19

这里想到个知识点补充下,在浏览器中js同步和异步的执行顺序问题,在浏览器执行栈中,优先执行同步任务,当同步任务全部执行完毕时,才会读取由异步任务组成的队列中的异步任务。这些异步任务还分成宏任务和微任务。

其中同步任务是指console.log()打印一条日志、声明一个变量或执行一次加减法操作、调用一个普通函数等等。异步任务的常见操作有AjaxDOM的事件操作setTimeoutPromise的then方法、Node的文件读取IO操作等。

理解同步异步执行顺序的最好方法还是看图:

前面说过,异步任务分为宏任务和微任务。

宏任务主要有:

script全局任务、setTimeoutsetIntervalsetImmediateI/OUI rendering

微任务主要有:

process.nextTickPromise.then()Object.observe

在微任务中 process.nextTick 优先级高于Promise。

当一个异步任务入栈时,主线程判断该任务为异步任务,并把该任务交给异步处理模块处理,当异步处理模块处理完打到触发条件时,根据任务的类型,将回调函数压入任务队列。

  • 如果是宏任务,则新增一个宏任务队列,任务队列中的宏任务可以有多个来源。
  • 如果是微任务,则直接压入微任务队列。

所以上图的任务队列可以继续细化一下:

面来理下事件执行机制:

  • 从全局任务 script开始,任务依次进入栈中,被主线程执行,执行完后出栈。
  • 遇到异步任务,交给异步处理模块处理,对应的异步处理线程处理异步任务需要的操作,例如定时器的计数和异步请求监听状态的变更。
  • 当异步任务达到可执行状态时,事件触发线程将回调函数加入任务队列,等待栈为空时,依次进入栈中执行。

当异步任务进入栈执行时:

  • 由于执行代码入口都是全局任务 script,而全局任务属于宏任务,所以当栈为空,同步任务任务执行完毕时,会先执行微任务队列里的任务。
  • 微任务队列里的任务全部执行完毕后,会读取宏任务队列中拍最前的任务。
  • 执行宏任务的过程中,遇到微任务,依次加入微任务队列。
  • 栈空后,再次读取微任务队列里的任务,依次类推。
代码语言:javascript
复制
 1setTimeout(function(){
 2    console.log(1);
 3    Promise.resolve().then(function(){
 4        console.log(2);
 5    })
 6}, 0)
 7setTimeout(function(){
 8    console.log(3);
 9}, 3)
10Promise.resolve().then(function(){
11    console.log(4);
12})
13console.log(5);
14
15// 5 4 1 2 3

上述行文与代码的结论简单表述是,在js加载时,在加载js脚本script文件后,先执行同步任务,当同步任务都执行完毕后,再执行异步任务中的微任务,当微任务都执行完毕后,再执行异步任务中的宏任务。如遇异步任务中包含同步任务或异步任务时,也要记住同步=>异步微任务=>异步宏任务的执行优先级。

下面来看个Promise封装的ajax请求示例

代码语言:javascript
复制
 1var getJson = function(url){
 2var promise = new Promise(function(resolve, reject){
 3    var handle = function(){
 4        if(this.readyState !== 4){
 5            return ;
 6        }
 7        if(this.status === 200){
 8            resolve(this.resoponse)
 9        }else {
10            reject(new Error(this.statusText));
11        }
12    };
13    var client = new XMLHttpRequest();
14    client.open('get', url);
15    client.onreadystatechange = handle;
16    client.responseType = 'json';
17    client.setRequestHeader('Accept', 'application/json');
18    client.send();
19})
20
21return promise;
22}
23getJson(orderUrlBase + '/rollBaseOrder/oustStockInfo?wareIds' + wareIds).then(function(data){
24console.log(data);
25}, function(){
26console.log(error);
27})

上面代码中,getJSON是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise对象。需要注意的是,在getJSON内部,resolve函数和reject函数调用时,都带有参数。

如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误;resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例。

下面代码中,调用resolve(10)以后,后面的console.log(2)还是会执行,并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。

代码语言:javascript
复制
 1new Promise(function(resolve, reject){
 2    resolve(10)
 3    console.log(2);
 4})
 5.then(function(data){
 6    console.log(data);
 7}, function(err){
 8    console.log(err);
 9})
10
11//2
12//10

一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。

代码语言:javascript
复制
 1new Promise(function(resolve, reject){
 2    return resolve(10)
 3    console.log(2);
 4})
 5.then(function(data){
 6    console.log(data);
 7}, function(err){
 8    console.log(err);
 9})
10//10
then方法

Promise实例具有then()方法,也就是说then()方法是定义在原型对象Promise.prototype上的,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

另外需要注意的是,then方法返回的是一个新的Promise实例,所以可以使用链式写法,即在then方法后面再调另一个then方法。

代码语言:javascript
复制
1getJSON("/post/1.json").then(function(post) {
2  return getJSON(post.commentURL);
3}).then(function funcA(comments) {
4  console.log("resolved: ", comments);
5}, function funcB(err){
6  console.log("rejected: ", err);
7});

这里请注意,上段代码中的第一个then方法指定的回调函数,返回的是一个Promise对象。第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolvee,就调用funcA,如果状态变为rejected,就调用funcB。

catch方法

Promise.prototype.catch()方法是then(null, rejection)的别名,用于指定发生错误时的回调函数。

代码语言:javascript
复制
1getJSON('/posts.json').then(function(posts) {
2  // ...
3}).catch(function(error) {
4  // 处理 getJSON 和 前一个回调函数运行时发生的错误
5  console.log('发生错误!', error);
6});

上面代码中,getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected,就会调用catch方法指定的回调函数,处理这个错误。另外,then方法指定的回调函数,如果运行中抛出错误,也会被catch方法捕获。

代码语言:javascript
复制
 1var promise = new Promise(function(resolve, reject){
 2    // throw new Error('error')
 3    // resolve(10)
 4    reject(new Error('can not do it.'))
 5})
 6promise.then(function(data){
 7    console.log(data);
 8}, function(err){
 9    console.log(err);
10})
11.catch(function(err){
12    console.log(err);
13})
14
15//Error: test

这里需要注意下,如果promise状态已经变成resolved,再抛出错误就是没用的。

上面代码中,Promise 在resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。

Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。

代码语言:javascript
复制
1getJSON('/post/1.json').then(function(post) {
2  return getJSON(post.commentURL);
3}).then(function(comments) {
4  // some code
5}).catch(function(error) {
6  // 处理前面三个Promise产生的错误
7});

上面代码中,一共有三个 Promise 对象:一个由getJSON产生,两个由then产生。它们之中任何一个抛出的错误,都会被最后一个catch捕获。

对于promise对象的错误捕获,通常最佳实践是不在then()方法里设置reject状态的回调函数(即then方法的第二个参数,其可选),而是使用catch方法捕获。

代码语言:javascript
复制
 1// bad
 2promise
 3  .then(function(data) {
 4    // success
 5  }, function(err) {
 6    // error
 7  });
 8
 9// good
10promise
11  .then(function(data) { //cb
12    // success
13  })
14  .catch(function(err) {
15    // error
16  });

至于这么写的理由,其实就是第二种写法可以捕获前面then方法中的错误,而如果没有使用catch方法,Promise对象抛出的错误不会传递到外层代码中,即对错误异常不会有任何反应,这会导致无法debug调试。

所以一般总是建议,Promise 对象后面要跟catch方法,这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端小二 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • then方法
  • catch方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档