promise原理及实现

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

promise原理及实现

1. promise 是一个构造函数，可以通过new Promise()的方式得到一个Promise实例 const pro = new Promise()

Promise 对象代表一个异步操作，有三种状态：

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

2. 在Promise上，有两个函数，分别为resolve（成功之后的回调）和reject（失败之后的回调）

var promise = new Promise(function(resolve, reject) {
// 异步处理 
// 处理结束后、调用resolve 或 reject 
});

3.promise 构造函数的原型属性上有一个then()方法，只要是Promise构造函数的实例都可以访问到

var myPromise = new Promise(function(resolve, reject){ 
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...) 
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法. 
    setTimeout(function(){ 
        resolve("成功!"); //代码正常执行！ 
    }, 250); 
}); 
myPromise.then(function(success){ 
    //success的值是上面调用resolve(...)方法传入的值. 
    //success参数不一定非要是字符串类型，这里只是举个例子 
    console.log("成功信息 " + success); 
});

4.由于Promise的实例是一个异步操作，所以内部拿到操作结果后无法使用return把操作的结果返回给调用者，只能使用回调函数的形式来把结果返回给调用者。

手动实现promise

class Promise { 
    constructor (process) { 
        this.status = 'pending' 
        this.msg = '' 
        process(this.resolve.bind(this), this.reject.bind(this)) 
        return this 
    } 
    resolve (val) { 
        this.status = 'fulfilled' 
        this.msg = val
    } 
    reject (err) {
        this.status = 'rejected' 
        this.msg = err 
    } 
    then (resolve , reject) {
        if(this.status === 'fulfilled') { 
            resolve(this.msg)
        } 
        if(this.status === 'rejected') { 
            reject(this.msg) 
        } 
    } 
} 
var lt=new Promise(function(resolve,reject){ 
    resolve('520'); 
}); 
lt.then(function(success){ 
    console.log(success); 
},function(){
    console.log('fail!'); 
});