promise使用与源码封装(二)

如何使用Promise?

1. Promise构造函数: Promise (excutor) {}

        excutor函数: 同步执行  (resolve, reject) => {}

        resolve函数: 内部定义成功时我们调用的函数 value => {}

        reject函数: 内部定义失败时我们调用的函数 reason => {}

        说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行

    2. Promise.prototype.then方法: (onResolved, onRejected) => {}

        onResolved函数: 成功的回调函数  (value) => {}

        onRejected函数: 失败的回调函数 (reason) => {}

        说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调

              返回一个新的promise对象

    3. Promise.prototype.catch方法: (onRejected) => {}

        onRejected函数: 失败的回调函数 (reason) => {}

        说明: then()的语法糖, 相当于: then(undefined, onRejected)

    4. Promise.resolve方法: (value) => {}

        value: 成功的数据或promise对象

        说明: 返回一个成功/失败的promise对象

    5. Promise.reject方法: (reason) => {}

        reason: 失败的原因

        说明: 返回一个失败的promise对象

    6. Promise.all方法: (promises) => {}

        promises: 包含n个promise的数组

        说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败

    7. Promise.race方法: (promises) => {}

        promises: 包含n个promise的数组

        说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

 1 .初始化架构

function Promise(executor){
 
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
 
}

2.创造resolve跟reject

//声明构造函数
function Promise(executor){
    //resolve 函数
    function resolve(data){
 
    }
    //reject 函数
    function reject(data){
 
    }
 
    //同步调用『执行器函数』
    executor(resolve, reject);
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
 
}

3.resolve与inject实现

PromiseState为属性状态（pending，fulfilled，rejected）

PromiseResult为返回结果

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
 
    //同步调用『执行器函数』
    executor(resolve, reject);
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
 
}

4.抛出错误 try catch

try{

        //同步调用『执行器函数』

        executor(resolve, reject);

    }catch(e){

        //修改 promise 对象状态为『失败』

        reject(e);

    }

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
 
}

5.promise的属性状态只能更改一次

在resolve与reject函数中进行PromiseState状态判断

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
 
}

6. then方法回调

Promise.prototype.then = function(onResolved, onRejected){
    console.log(this,'this')
    //调用回调函数  PromiseState
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
}

7.异步任务then方法执行回调

先指定回调在执行异步任务

在then方法中PromiseState状态未改变，所以我们需要先存储回调方法，需要在resolve方法或reject方法中执行

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callback = {};
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行回调
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    //调用回调函数  PromiseState
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    //判断 pending 状态
    if(this.PromiseState === 'pending'){
        //保存回调函数
        this.callback = {
            onResolved: onResolved,
            onRejected: onRejected
        }
    }
}

 //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('OK');
                reject("error");
            }, 1000);
        });
 
        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        });
 
        console.log(p);

8.指定多个回调

需要将多个回调都存储起来，然后在resolve与reject方法中循环执行后调方法

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}
 
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    //调用回调函数  PromiseState
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    //判断 pending 状态
    if(this.PromiseState === 'pending'){
        //保存回调函数
        this.callbacks.push({
            onResolved: onResolved,
            onRejected: onRejected
        });
    }
}

 let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('OK');
                reject('No');
            }, 1000);
        });
 
        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        });
 
        p.then(value => {
            alert(value);
        }, reason=>{
            alert(reason);
        });
 
        console.log(p);