JavaScript中的Promise使用详解

熟悉前端开发的都一定写过回调方法（callback），简单的说，回调方法是一个函数被作为参数传递给另一个函数，比如下面的代码

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);
}
execute(say, 'hello word');

复制

say函数作为参数传递给execute函数，一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——地狱回调。

那么如何解决地狱回调，保持我们的代码简短，这时Promise就出场了，Promise对象可以理解为一次执行的异步操作，使用Promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。我们用Promise对象改造上面的代码

function say(value) {
    return new Promise(function(resolve, reject) {
        resolve(value)
    })
}
function execute(value) {
    return new Promise(function(resolve, reject) {
        resolve(value)
    })
}
execute('hello word').then((value)=>{
    say(value).then((sayValue)=>{   
        alert(sayValue)
    })
})

复制

上面代码只是根据第一段代码做的演示，代码量增加了，但是比传统的解决方案更合理和更强大。

Promise正如字面意思-承诺，“承诺将来会执行”约定的事情。我们首先需要了解Promise的三种状态：

• pending: 初始状态，既不是成功，也不是失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

先来构造下一个Promise实例

const promise = new Promise(function(resolve, reject) {
  // … some code
  If (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

复制

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数。

Resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

Reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

还是拿第二段代码演示，讲下运行过程，首先是这段代码

execute('hello word').then((value)=>{
    say(value).then((sayValue)=>{   
        alert(sayValue)
    })
})

复制

首先是调用execute方法，传入‘hello word’，这个execute方法返回promise对象。调用用then方法接收值，再调用say方法，传入execute方法返回的值，再调用then方法接收，最后alert。

暂时就写到这，后期在更新。