谈谈 ES6 的 Promise 对象

linkin 发布于2019-08-21 10:33 / 1908人阅读

摘要：一般会这样去写要在第一个请求成功后才可以执行下一步这样的写法的原理是，当执行一些异步操作时，我们需要知道操作是否已经完成，所有当执行完成的时候会返回一个回调函数，表示操作已经完成。

前言

开篇首先设想一个日常开发常常会遇到的需求：在多个接口异步请求数据，然后利用这些数据来进行一系列的操作。一般会这样去写：

$.ajax({
    url: "......",
    success: function (data) {
        $.ajax({
            // 要在第一个请求成功后才可以执行下一步
            url: "......",
            success: function (data) {
                 // ......
            }
        });
    }
});

这样的写法的原理是，当执行一些异步操作时，我们需要知道操作是否已经完成，所有当执行完成的时候会返回一个回调函数，表示操作已经完成。

使用回调函数的形式理解起来并不困难，但是实际的应用当中会有以下的缺点：

在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的 Callback Hell。

如果几个异步操作之间并没有前后顺序之分（例如不需要前一个请求的结果作为后一个请求的参数）时，同样需要等待上一个操作完成再实行下一个操作。

为了解决上述的问题，Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准。

什么是 Promise

一个 Promise 对象可以理解为一次将要执行的操作（常常被用于异步操作），使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。而且由于 Promise.all 这样的方法存在，可以让同时执行多个操作变得简单。接下来就来简单介绍 Promise 对象。

resolve 和 reject

首先来看一段使用了 Promise 对象的代码。

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!");
        } else {
            reject("Good bye!");
        }
    });
}

helloWorld(true).then(function (message) {
    alert(message);
}, function (error) {
    alert(error);
});

jsFiddle(请用现代浏览器打开)

上面的代码实现的功能非常简单，helloWord 函数接受一个参数，如果为 true 就打印 "Hello World!"，如果为 false 就打印错误的信息。helloWord 函数返回的是一个 Promise 对象。

在 Promise 对象当中有两个重要方法————resolve 和 reject。

resolve 方法可以使 Promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作，在这个例子当中就是 Hello World! 字符串。

reject 方法则是将 Promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

Promise 的三种状态

上面提到了 resolve 和 reject 可以改变 Promise 对象的状态，那么它究竟有哪些状态呢？

Promise 对象有三种状态：

Fulfilled 可以理解为成功的状态

Rejected 可以理解为失败的状态

Pending 既不是 Fulfilld 也不是 Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态

helloWorld 的例子中的 then 方法就是根据 Promise 对象的状态来确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject 时执行第二个函数（onRejected）。

then 和 catch then

helloWorld 的例子当中利用了 then(onFulfilld, onRejected) 方法来执行一个任务打印 "Hello World!"，在多个任务的情况下 then 方法同样可以用一个清晰的方式完成。

function printHello (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello");
        } else {
            reject("Good bye!");
        }
    });
}

function printWorld () {
    alert("World");
}

function printExclamation () {
    alert("!");
}

printHello(true)
    .then(function(message){
        alert(message);
    })
    .then(printWorld)
    .then(printExclamation);

jsFiddle

上述例子通过链式调用的方式，按顺序打印出了相应的内容。then 可以使用链式调用的写法原因在于，每一次执行该方法时总是会返回一个 Promise 对象。另外，在 then onFulfilled 的函数当中的返回值，可以作为后续操作的参数，因此上面的例子也可以写成：

printHello(true).then(function (message) {
    return message;
}).then(function (message) {
    return message  + " World";
}).then(function (message) {
    return message + "!";
}).then(function (message) {
    alert(message);
});

jsFiddle

同样可以打印出正确的内容。

catch

catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法，也就是说可以写成 then(fn).catch(fn)，相当于 then(fn).then(null, fn)。使用 catch 的写法比一般的写法更加清晰明确。

Promise.all 和 Promise.race

Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

上面的例子模拟了传输两个数据需要不同的时长，虽然 p2 的速度比 p1 要快，但是 Promise.all 方法会按照数组里面的顺序将结果返回。

日常开发中经常会遇到这样的需求，在不同的接口请求数据然后拼合成自己所需的数据，通常这些接口之间没有关联（例如不需要前一个接口的数据作为后一个接口的参数），这个时候 Promise.all 方法就可以派上用场了。

还有一个和 Promise.all 相类似的方法 Promise.race，它同样接收一个数组，不同的是只要该数组中的 Promise 对象的状态发生变化（无论是 resolve 还是 reject）该方法都会返回。

兼容性

最后是关于 Promise 对象的兼容性问题。

在浏览器端，一些主流的浏览器都已经可以使用 Promise 对象进行开发，在 Node.js 配合 babel 也可以很方便地使用。

如果要兼容旧的浏览器，建议可以寻找一些第三方的解决方案，例如 jQuery 的 $.Deferred。

感谢你的阅读，有不足之处请为我指出。

参考

JavaScript Promise迷你书（中文版）

本文同步于我的个人博客 http://blog.acwong.org/2015/06/22/es6-promise/

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

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

谈谈ES6前后的异步编程

摘要：回调函数这是异步编程最基本的方法。对象对象是工作组提出的一种规范，目的是为异步编程提供统一接口。诞生后，出现了函数，它将异步编程带入了一个全新的阶段。更多详情点击http://blog.zhangbing.club/Ja... Javascript 语言的执行环境是单线程的，如果没有异步编程，根本没法用，非卡死不可。为了解决这个问题，Javascript语言将任务的执行模式分成两种...

fizz 2019-08-22 18:25 评论0 收藏0
微信小程序踩坑系列——从wx.request谈谈异步处理

摘要：其实我们在同步流程中才说返回，异步没有返回这个概念或者说异步返回是没有意义的，异步对应的是回调，也就是说，对于一个异步函数，我们应该传入一个回调函数来接收结果。原文链接：https://www.xksblog.top/talk-... 见到wx.request的第一眼，就让我想起了$.ajax这东西，使用起来确实有很多不方便，不能忍，幸好小程序是支持ES6语法的，所以可以使用pro...

RdouTyping 2019-08-23 12:09 评论0 收藏0
谈谈JavaScript异步代码优化

摘要：异步问题回调地狱首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。同时使用也是异步编程最基础和核心的一种解决思路。基于，目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言在实际编码中，我们经常会遇到Javascript代码异步执行的场景...

chnmagnus 2019-08-22 17:08 评论0 收藏0
JavaScript 异步编程的四种方式

摘要：异步编程是每个使用编程的人都会遇到的问题，无论是前端的请求，或是的各种异步。本文就来总结一下常见的四种处理异步编程的方法。利用一种链式调用的方法来组织异步代码，可以将原来以回调函数形式调用的代码改为链式调用。异步编程是每个使用 JavaScript 编程的人都会遇到的问题，无论是前端的 ajax 请求，或是 node 的各种异步 API。本文就来总结一下常见的四种处理异步编程的方法。...

microelec 2019-08-20 17:36 评论0 收藏0
ES6系列文章 Promise

摘要：已成功，内部执行了方法，实例处于状态，状态不可改变了。实际上是函数的一种简写形式，当执行后，可以被的回调函数接收处理。该语句并未执行若内部发生错误，会被自动的执行。静态函数返回一个成功的对象，静态函数返回一个拒绝状态的对象。视频讲解 ES6的 Promise 是个啥哩？，是个承诺。为了解决 js 回调地狱。Promise 给我的体会是: 开始云里雾里，然后越用越好用。今天才明白承诺是...

thekingisalwaysluc 2019-08-21 16:51 评论0 收藏0