资讯专栏INFORMATION COLUMN

关于promise的学习和拓展

mayaohua / 2947人阅读

摘要:秒钟后调用函数观察上述代码执行,在的控制台输出可以看到就是典型的异步操作统一执行逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用函数或函数。

Promise的学习和拓展

以前开发的时候偶尔会在请求中,或者其他场景中用到promise,只知道它是什么(链式调用,用于请求的后返回值得操作之类的),大概怎么用,却没有深入了解。

起因:(在参考了廖雪峰的promise讲解后https://www.liaoxuefeng.com/w...)

在javascript中,所有的代码都是单线程进行的。
由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现(否者在加载完js文件后。其他操作也不会发生了):

参数:executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数, resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回所建promise实例对象前被调用)。resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。executor 内部通常会执行一些异步操作,一旦异步操作执行完毕(可能成功/失败),要么调用resolve函数来将promise状态改成fulfilled,要么调用reject 函数将promise的状态改为rejected。如果在executor函数中抛出一个错误,那么该promise 状态为rejected。

由此可以知道,一个promise包含3个状态:(注意,不包含resolve
)
pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
function callback() {
    console.log("Done");
}
console.log("before setTimeout()");
setTimeout(callback, 0); // 1秒钟后调用callback函数
console.log("after setTimeout()");

观察上述代码执行,在Chrome的控制台输出可以看到:

before setTimeout()
after setTimeout()
Done
AJAX就是典型的异步操作
var ajax = ajaxGet("http://...");
ajax.ifSuccess(success)
    .ifFail(fail);
统一执行AJAX逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用success函数或fail函数。
这个时候promise方法就应运而生了。
一个简单的promise应用
生成一个0-2之间的随机数,如果小于1,则等待一段时间后返回成功,否则返回失败:
function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log("set timeout to: " + timeOut + " seconds.");
    setTimeout(function () {
        if (timeOut < 1) {
            log("call resolve()...");
            resolve("200 OK");
        }
        else {
            log("call reject()...");
            reject("timeout in " + timeOut + " seconds.");
        }
    }, timeOut * 1000);
}

有了执行函数,我们就可以用一个Promise对象来执行它,并在将来某个时刻获得成功或失败的结果:

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log("成功:" + result);
});
var p3 = p2.catch(function (reason) {
    console.log("失败:" + reason);
});

也可以写成链式调用的形式

new Promise(test).then(function (result) {
    console.log("成功:" + result);
}).catch(function (reason) {
    console.log("失败:" + reason);
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104295.html

相关文章

  • ES6(ECMAScript 6)新特性

    摘要:目前的标准化工作正在进行中,预计会在年月份放出正式敲定的版本。反的方法可以接收一个参数并且返回值取决与它的构造函数。之后就可以用这个返回值做为对象的键了。 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。 ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐...

    impig33 评论0 收藏0
  • 2015 年度小结(技术方面)

    摘要:因为路由层面受业务影响很大,经常修改一些功能的行为,所以后来大部分测试都是针对层面的单元测试。在我了解的过程中,我发现中文网络上对的讨论非常分散,于是我创建了中文社区,到年末已经有个注册用户和个帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 从 2014 年末开始开发的一个互联网金融项目终于在今年三月份上线了,这是一个 Node...

    宋华 评论0 收藏0
  • 2015 年度小结(技术方面)

    摘要:因为路由层面受业务影响很大,经常修改一些功能的行为,所以后来大部分测试都是针对层面的单元测试。在我了解的过程中,我发现中文网络上对的讨论非常分散,于是我创建了中文社区,到年末已经有个注册用户和个帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 从 2014 年末开始开发的一个互联网金融项目终于在今年三月份上线了,这是一个 Node...

    Nosee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<