Promise作用以及基本使用

Promise的作用以及基本使用

关于Promise的概念，在实际使用之前对其的理解一直比较模糊，只是停留在一些文档上的描述。在使用中其实可以根据其特性进行一些更佳的实践。在这里简单介绍一下其作用以及基础用法。

作用

Promise对象可以理解为一次执行的异步操作，使用promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。也就是说，有了Promise对象，就可以将异步操作以同步的操作的流程表达出来，避免了层层嵌套的回调函数。总结一下就是可以将原先不可控的回调通过promise转为更加可控更清晰的方式表达，更加高效，更便于维护。

示例：未使用promise，回调必须层层嵌套

$.ajax(url1, function(data1){
    // do something1...
    $.ajax(url2, function(data2){
        // do something2...
        $.ajax(url3, function(data3){
            // do something3...
        })
    });
});

如果有多个嵌套，导致代码不够直观，逻辑梳理上会更加的困难。并且这几个操作都是有执行的一个依赖关系，需要等待上一个请求完成才可以进行下一个请求，而这些本身就是异步，这样的等待是没有必要的。所以promise可以帮助我们解决这一部分痛点。

了解一下Promise的特点

1、对象的状态不受外界影响（Promise对象代表一个异步操作，有三种状态）。

pending（执行中）
Resolved（成功，又称Fulfilled）
rejected（拒绝）

其中pending为初始状态，fulfilled和rejected为结束状态（结束状态表示promise的生命周期已结束）。promise只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态.。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise对象的状态改变，只有两种可能：

从Pending变为Resolved
从Pending变为Rejected

只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果

3、Promise对象的缺点：

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成。

4、promise兼容性：除了IE这种古老的浏览器和一些低版本的安卓外，大部分的浏览器对于promise的兼容性还是很友好的，所以我们可以在谷歌的控制台直接测试我们的代码。

接下来用一些例子来看看具体的使用方法

基本用法

1、首先我们new一个Promise,将Promise实例化
2、然后在实例化的promise可以传两个参数，一个是成功之后的resolve，一个是失败之后的reject
3、Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数

var promise = function(isReady){
    return new Promise(function(resolve, reject){
        // do somthing, maybe async
        if (isReady){
          return resolve('成功执行');
        } else {
          return reject('出错了');
        }
    });
}
 
//Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise(true).then(function(value){
    // success,这里是resolve的回调函数
    console.log(value);  //hello world
}, function(err){
    // failure，这里是reject的回调函数
    console.log(err)
})

上述代码是执行成功，返回成功执行,如果想测试一下失败后的返回值，可以把promise(true).then...这里改为 promise(false).then...在控制台试下

链式操作

Promise并不只是简化层层回调的写法，更重要的在于是通过传递状态的方式来使回调方式能够及时的调用，因此，相比于callback，它更灵活，更简单。下面我们来看看Promise的链式操作：

makePromise1()
.then(function(value){
    console.log(value);
    return makePromise2();
})
.then(function(value){
    console.log(value);
    return makePromise3();
})
.then(function(value){
    console.log(value);
});

function makePromise1(){
    var p = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('异步1');
            resolve('异步1参数');
        }, 2000);
    });
    return p;            
}
function makePromise2(){
    var p = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('异步2');
            resolve('异步2参数');
        }, 2000);
    });
    return p;            
}
function makePromise3(){
    var p = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('异步3');
            resolve('异步3参数');
        }, 2000);
    });
    return p;            
}

上面的代码中，有三个异步操作，makePromise1,makePromise2,makePromise3。其中第二个和第三个依次执行，也就是上一个操作完成之后才可以进行。会相继的打印出异步1，异步1参数···

Promise的catch方法

var promise = function(isReady){
    return new Promise(function(resolve, reject){
        if (isReady){
          return resolve('成功执行');
        } else {
          return reject('失败');
        }
    });
}
promise(true)
.then(function(value){
    console.log('resolved');
    console.log(value);
    console.log(wawa); //此处的wawa未定义
})
.catch(function(error){
    console.log('rejected');
    console.log(error);
});

catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法，也就是说可以写成 then(fn).catch(fn),相当于 then(fn).then(null, fn)使用 catch 的写法比一般的写法更加清晰明确，其实可以类比成try/catch，这样，其中有报错的地方不会阻塞运行。比如定义了一个未定义wawa,正常来说它上面的代码也不会运行，因为被这个报错阻塞了，有了catch,它上面的代码可以正常运行下去

promise.all方法

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

var p1 = new Promise(function (resolve) {
   setTimeout(function () {
       resolve("第一个promise");
   }, 3000);
});

var p2 = new Promise(function (resolve) {
   setTimeout(function () {
       resolve("第二个promise");
   }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
   console.log(result); // ["第一个promise", "第二个promise"]
});

上面的代码中，all接收一个数组作为参数，p1,p2是并行执行的，等两个都执行完了，才会进入到then，all会把所有的结果放到一个数组中返回，所以我们打印出我们的结果为一个数组。值得注意的是，虽然p2的执行顺序比p1快，但是all会按照参数里面的数组顺序来返回结果。

promise.race方法

race的意思为赛跑，因此，promise.race也是传入一个数组，但是与promise.all不同的是，race只返回跑的快的值，也就是说result返回比较快执行的那个。

var p1 = new Promise(function (resolve) {
   setTimeout(function () {
       console.log(1);
       resolve("第一个promise");
   }, 3000);
});

var p2 = new Promise(function (resolve) {
   setTimeout(function () {
       console.log(2);
       resolve("第二个promise");
   }, 1000);
});

Promise.race([p1, p2]).then(function (result) {
   console.log(result); 
});

// 结果：
// 2
// 第二个promise
// 1

在这边可以看到，传的值中，只有p2的返回了，但是p1没有停止，依然有执行。race的应用场景为，比如我们可以设置为网路请求超时。写两个promise，如果在一定的时间内如果成功的那个我们没有执行到，我们就执行失败的那个