从快的线上callback hell代码说起

最新推荐文章于 2024-04-01 22:30:00 发布

weixin_33802505

最新推荐文章于 2024-04-01 22:30:00 发布

阅读量80

点赞数

文章标签：前端后端 java ViewUI

概述

就像谈到闭包必须要说js变量作用域一样，谈到 promise 之前肯定要先说谈异步编程。一直以来， javascript 处理异步方式都是使用 callback 方式，对与写 javascript 的人来时候 callback 深入人心。比如只有前端经验没有后端经验的同学看到 java 代码可能会问『为什么readFile方法可以直接返回结果？为何不使用 callback 』

由于 javascript 的单线程性质，必须等待上一个事件执行完成才能处理下一步。传统解决 javascript 异步编程的方法就是使用 callback，比如这样：

$(document).ready(function(){
    ajaxGet('/api/userinfo', function() {
        ajaxGet('/api/productList', function() {
            ajaxGet('/api/ads', function(result) {
                console.log('all done!');
            });
        });
    });
});

再比如这样：

截止到2015年10月20日晚，http://www.kuaidadi.com/assets/js/animate.js还可以访问。

『快的』用线上代码为我们生动的演示了什么叫callback hell——『回调地狱』。

promise

Promise 字面上可以理解为『承诺』，即A调用B，B返回一个『承诺』给A，然后A就可以认为B给我返回结果的时候我就执行方案一了，反之没有得到结果就执行方案二。

上面这句话翻译为代码：

var resB = B();
var runA = function() {
    resB.then(execPlan1, execPlan2);
}
runA();

Promise 是一种异步操作模式，表示一个异步操作的最终结果，返回的是一个 Promise 对象，由于是立即返回，所以可以采用同步操作的流程。这个 Promise 对象有一个 then 方法，允许指定回调函数，在异步任务完成后调用。

比如上面『快的』的例子可以改写为这样：

(new Promise(step1))
    .then(step2)
    .then(step3)
    .then(step4)
    .then(step5)
    .then(step6)
    .then(step7)
    .then(step8)
    .then(step9)
    .then(step10)
    .then(step11)
    .then(step12)
    .then(step13)
    .then(step14)
    .then(step15)
    .then(step16)
    .then(step17);

看，『横向的胖子』变的苗条了，看起来是不是更加可爱呢？

Promise有个一个规范叫做 Promises/A+, 有各种各样的第三方库遵循这个规范实现了 Promise/A+ 。比如 Q、 when, jQuery 有个类似的方法叫 Deferred。

一个 Promise 对象的实例一般有三种状态：未完成（pending）、已完成（fulfilled）和失败（rejected）。