Promise 运行机制

最新推荐文章于 2024-07-20 23:55:03 发布

weixin_30258901

最新推荐文章于 2024-07-20 23:55:03 发布

阅读量286

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/luckyjing77/p/8932216.html

版权

本文将整理一下自己对Promise（）运行机制的简单理解：

（一）promise()是对 ajax异步请求执行逻辑的梳理（异步请求串行）

　　先看一下ajax请求的异步处理：

request.onreadystatechange = function(){
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

　　作为开发我们都曾有过异步引起的痛点——异步还没执行完，页面已经渲染完了，所以页面数据和接口数据不同步、事件明明已经绑定了，但是click都是没有效果，发型换了好几个，都没有发现是什么问题，原来只是事件绑定的时候，页面还有渲染（反正刚开始我经常犯这种错误），尤其对于刚入门的小白，还没有很透彻的理解异步到底是怎么一回事，就更摸不到头脑了，必定我们的思维习惯是顺序执行，对于这个问题JQuery框架封装的ajax请求中callback函数已经解决了大部分问题。但是你是否想过，如果这样写会更容易理解：

var ajax = Get('../resquest/url);
ajax.ifSuccess()//执行成功之后约定的回调函数
      .ifFail()    //执行失败之后约定的回调函数

　　而Promise的出现，让异步请求的执行更加语义化，它将异步请求串行，开始只关注异步请求，承诺（promise）在后面处理请求结果，从此再也不担心异步问题了。

new Promise(function () {
    //异步函数执行过程
}).then(function (r) {
    log('Done: ' + r);//成功回调
}).catch(function (reason) {
    log('Failed: ' + reason);//失败回调
});

　（二）使异步请求并行（all）

　　使用promise.all（），同时进行多个异步请求

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

　（三）用于容错（race）

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

如p1请求先响应，.then()就先用p1的结果，p2仍然在执行，但是结果被废弃。

以上便是我对Promise（）一些简单理解，希望可以帮到你~