Promise简单使用
发布于 2 年前 作者 Huyaguang 1455 次浏览 来自 分享

ES6原生提供了Promise对象。所谓Promise，就是Node中的一个对象，用来传递异步操作的消息。

Promise的特点
  1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending、Resolved和Rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，他的英语意思就是【承诺】，表示其他手段无法改变。
  2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变，会一直保持这个结果。就算改变已经发生了，你在对Promise对象添加回调函数，也会立即得到这个结果，这与实践（Event）完全不同，事件的特点是：如果你错过了它，再去监听，是得不到结果的。

Promise简单例子

创建一个Promise
var promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('执行完成');
        resolve('随便什么数据');
    }, 1500)
})

Promise的构造函数接收一个参数，就是一个函数，并传入两个参数：resolve、reject，分别表示异步操作执行成功后的回调函数和异步执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解，后面再细究概念。

上边的例子中，我们只是创建了一个Promise的对象，并没有调用它，然后我们来看下边的这个完整的例子：

function runAsync () {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return promise;
}
runAsync();

这个时候你应该有两个疑问：1. 包装这么一个函数有什么用？2. resolve(‘随便什么数据’)；这个是干什么的？

接下来我们继续讲。在我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。还记得Promise对象上有then、catch方法吧。这就是强大之处了，看下边的代码：

runAsync().then(function (data) {
    console.log(data);
    // 后边可以用传过来的数据来做一些其他操作
    // ......
});

在runAsync()的返回上直接调用then方法，then方法接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的参数。运行这段代码，会在两秒后输出“执行完成”，“随便什么数据”。

以上的例子中还不能很好的表现出Promise的强大之处，下面我们开始讲解链式操作

链式操作

首先看一个例子

function runAsync1(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('随便什么数据1');
        }, 1000);
    });
    return promise;
}
function runAsync2(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('随便什么数据2');
        }, 2000);
    });
    return promise;
}
function runAsync3(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return promise;
}
runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return runAsync3();
    })
    .then(function (data) {
        console.log(data);
    });

这段代码运行的结果是：

异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
异步任务3执行完成
随便什么数据3

如果我们来把上班执行的代码改为这样：

runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return '直接返回数据';
    })
    .then(function (data) {
        console.log(data);
        done();
    });

这样执行完的结果就会变成：

异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
直接返回数据

这里的原因自己慢慢体会吧！！！

reject的用法

到这里，你应该对Promise有了最基本的了解了。在ES6中除了resolve，还有reject这个功能。事实上，我们前面的例子中都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调，看下面的代码：

function getNumber() {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num = Math.ceil(Math.random() * 10);
            if (num < 5) {
                resolve(num);
            } else {
                reject('数字太大了');
            }
        }, 1000);
    });
    return promise;
}
getNumber().then(
    function (data) {
        console.log('resolved');
        console.log(data);
    },
    function (reason, data) {
        console.log('rejected');
        console.log(reason);
    });

getNumber函数用来获取一个数字，1秒后执行完成，如果数字小于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们就认为是“失败”了，调用reject并传递一个参数，作为失败的原因。

运行getNumber并且在then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据，多次运行这段代码，你会随机到下面两种结果：

resolved
3
或者
rejected
数字太大了

catch的用法

我们知道Promise对象除了then方法，还有一个catch方法，他是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样的：

getNumber()
    .then(function (data) {
        console.log('resolved');
        console.log(data);
    })
    .catch(function (reason) {
        console.log('rejected');
        console.log(reason);
    })

效果和写在then的第二个参数里边是一样的。不过它还有另一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常（代码出错），那么并不会报错卡死js，而是进到这个catch方法中。请看下面的代码：

getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        console.log(somedata); //此处的somedata未定义
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是这里，我们会得到这样的结果：

resolved
4
rejected
[ReferenceError: somedata is not defined]

###all的用法 Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

会打印：

异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
[ '随便什么数据1', '随便什么数据2', '随便什么数据3' ]

有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源，比如图片、flash以及各种静态文件。所有的都加载完后，我们进行页面的初始化。

race的用法

all方法的效果实际上是【谁跑得慢，以谁为准执行回调】，那么相对的就有另一个方法【谁跑的快，以谁为准执行回调】，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync()的延时改为1秒来看一下：

Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

这个异步操作同样是并行执行的。1秒后runAsync已经执行完了，此时then里面的就执行了。结果是这样的：

异步任务1执行完成
随便什么数据1
异步任务2执行完成
异步任务3执行完成

这个时候runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。

1 回复

再加上async await 就更好了

回到顶部