JavaScript:学习笔记(9)——Promise对象

JavaScript:学习笔记(9)——Promise对象

引入Promise

　　Primose是异步编程的一种解决方案，比传统的解决方案回调函数和事件更加合理和强大。如下面为基于回调函数的Ajax操作：

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

通过分析，我们发现回调一个很大的问题，就是层层嵌套的回调函数，当代码量较大的时候，将难以维护。

　　所谓Promise，提供了另外一种链式的异步方案。

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
    .ifFail(fail);

　　先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用success函数或fail函数。古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。　　

　　异步操作完成后，将可以设置Promise的状态，他有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），一旦设置好后任何操作都无法改变这个状态，并且任何时候都可以得到这个状态。

 

基本用法

　　基本语法如下：

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

　　Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve、reject（由JS提供，不需要自己提供）

• resolve函数将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
• reject函数将Promise对象的状态从“未完成”变为“失败”，在异步操作失败是调用，并将异步操作的错误，作为参数传递出去。

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

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

　　then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

实例

const promise = new Promise((resolve, reject) => {
    console.log("Promise")
    resolve();
});

promise.then(()=>{
    console.log("Resolve")
})

console.log("Hi")

　　上面代码中，Promise新建后立即运行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

　　一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})