promise详解

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件相比，更合理和更强大，可以有效避免回调地狱。

传统ajax写法

ajax1({...,success(res1){
    ...
}})

ajax2({...,params:{res1},success(res2){ // error no res1
    ...
}})

当我们的ajax2需要用到ajax1数据的时候，我们不得不使用嵌套式：

ajax1({...,success(res1){
    ajax2({...,params:{res1},success(res2){
        // doing something
    }})
}})

如果嵌套层级多话，将形成回调地狱，极难维护

 

promise写法

p1 = function() {
  return  new Promise(function(resolve){
        ajax1({...,success(res1){
            resolve(res1)
        }})
    })
}

p2 = function(){
   return new Promise(function(resolve){
        ajax2({...,params:{res1},success(res2){
            /// doing something
        }})
    })
}

改造后的写法

p1().then(res=>{
    return p2()
}).then(res2=>{
    // doing something
})

效果斐然

promise的核心特性

1. 一个 Promise 有 3 种状态：

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

  pending 状态的 Promise 可能会变为fulfilled 状态，也可能变为 rejected 状态

2. Promise 对象的状态，只有内部能够改变（而且只能改变一次），不受外界影响。

3. 对象的状态一旦改变，就不会再变，任何时候都可以得到这个结果。 Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。一旦状态发生改变，状态就凝固了，会一直保持这个结果。

const p = new Promise((resolve, reject)=>{
  resolve("resolved first time!"); // 只有第一次有效
  resolve("resolved second time!");
  reject("rejected!");
});
p.then(
  (data)=>console.log(data), 
  (error)=>console.log(error)
);

控制台打印

Promise API

// 1. 构造方法
const p = new Promise((resolve, reject) => { /* executor*/
    // 1.1. Promise构造函数执行时立即调用 executor 函数;
    // 1.2. resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）
    // 1.3. 如果在executor函数中抛出一个错误，那么该promise 状态为rejected。
    // 1.4. executor函数的返回值被忽略。
});

// 2.原型方法
Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)

// 3.静态方法
Promise.all(iterable);
Promise.race(iterable);
Promise.reject(reason);
Promise.resolve(value);

 自己实现promise
 待续。。。

　　参考

Promise/A+：https://promisesaplus.com/

Promise/A+ 规范测试集：https://github.com/promises-aplus/promises-tests

阮一峰es6 Promise： http://es6.ruanyifeng.com/#docs/promise

手把手教你使用ts 一步一步的去完成一个Promise： https://juejin.im/post/5d078109e51d45108f254207

你真的会用 Promise 吗？：https://juejin.im/post/5cf7857ff265da1bac4005b2