【ES6】 Promise / await / async的使用

为什么需要在项目中引入promise？

项目起因：我们在页面中经常需要多次调用接口，而且接口必须是按顺序串联调用

（即A接口调用完毕，返回数据后，再调用B接口）

这样就会造成多次回调，代码长得丑，而且不好维护，这就是传说中的 回调地狱（Callback Hell）

官方起因：为了我们的代码更加具有可读性和可维护性，我们需要将数据请求与数据处理明确的区分开来

(几乎介绍promise的文章都有这么一句话，我就借用理解下)

1、promise

1.1、官方解释：

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

译文：Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

　　1.2、基本语法

//构建Promise
var promise = new Promise(function (resolve, reject) {
    if (/* 异步操作成功 */) {
        resolve(data);
    } else {
        /* 异步操作失败 */
        reject(error);
    }
});

类似构建对象，我们使用new来构建一个Promise。Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」，由JavaScript引擎提供。

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

1.3、Promise对象代表一个未完成、但预计将来会完成的操作。

它有以下三种状态：

pending ：初始值，不是fulfilled，也不是rejected
fulfilled ：代表操作成功
rejected ：代表操作失败

Promise有两种状态改变的方式，既可以从pending转变为fulfilled，也可以从pending转变为rejected。

一旦状态改变，就「凝固」了，会一直保持这个状态，不会再发生变化。

即，执行完 resolve(data); 再执行reject(error), 状态仍然是成功，不会被重新改变

当状态发生变化，promise.then绑定的函数就会被调用。

注意：Promise一旦新建就会「立即执行」，无法取消。这也是它的缺点之一。

1.4、基本API

.then()

语法：Promise.prototype.then(onFulfilled, onRejected)

对promise添加onFulfilled和onRejected回调，并返回的是一个新的Promise实例（不是原来那个Promise实例），且返回值将作为参数传入这个新Promise的resolve函数。

因此，我们可以使用链式写法，如上文的例2.7。由于前一个回调函数，返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

巴特西

【ES6】 Promise / await / async的使用

.then()

最新文章

热门文章