JavaScript之异步处理 Promise理解

promise 就是ES6新语法中 新增解决异步处理的一种方法 解决异步处理 并返回成功与失败的数据
其他方法 async await、回调函数、generator yleid
promise 中的状态
                起始状态为 pending
                成功状态为 resolved
                失败状态为 rejected
注意: promise 只能从起始状态改为成功或失败的某一种状态 且为单向改变（不可逆）
无论成功还是失败，都会有一个结果数据
              成功为对应的成功数据返回值
              失败为对应的失败数据返回值
                                                        resolve resolved then onResolved()/onRejected()
new Promise 返回新的promise       

                                                          reject rejected finall/catch onRejected()
promise的优势
1. promise指定回调函数更加灵活
      普通回调: 必须在异步函数执行前 指定回调函数
      promise: 异步函数执行前/中/后 都可以指定
      promise 的状态通过回调函数的方式确定 当存在链式调用时 then方法由上一级的返回结果决定
new Promise((resolve,reject)=>{
             resolve(1);
})
.then(
          (res)=>{
                     return Promise.reject(2)
           },
          (err)=>{}).then(
          (res)=>{},
          (err)=>{
                   console.log(2);
           }
)
promise 对reject 返回的数据 .then中没有对应的回调函数接收 就默认为 err => throw err 一直向下抛 直至遇到处理的函数
promise 对于 .then中有 能处理的 reject 的回调函数 那么就执行该回调 若后面还有.then 方法 则执行成功方法
promise 中 .then 或 .catch 接收的状态为 reject 或者 resolve 当为pending状态时 .then .catch ... 都不会被调用
使用 return new Promise(()=>{}) 状态为 pending 中断后续执行

 

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// 定义Promise构造函数
class Promise{
    //actuator 是一个执行器 包含了 resolve reject
    constructor(actuator){
        //起始状态为pending
        this.status = PENDING;
        //保存传输的数据
        this.data = undefined;
        //保存回调函数 保存数据为 [{onResolved1,onRejected1},{onResolved2,onRejected2}]
        this.callback = [];
        //防止this发生改变 使用self 保存
        const self = this;
        // 定义成功方法 
        function resolve(params) {
            // 判断当前的状态是否为pending
            if(self.status!==PENDING){
                return;
            }
            // 保存状态以及传递数据
            self.status = RESOLVED;
            self.data = params;
            // 判断回调函数数组中是否存在待执行的数据
            if(self.callback.length > 0){
                // 由于所有的回调函数都是异步执行的 因此使用setTimeout 进行异步执行
                setTimeout(()=>{
                    // 遍历数组 执行对应的成功回调函数
                    self.callback.forEach(item =>{
                        item.onResolved();
                    })
                },0)
            }
        }
        // 失败方法 与 成功方法类似
        function reject(params) {
            if(self.status!==PENDING){
                return;
            }
            self.status = REJECTED;
            self.data = params;
            if(self.callback.length > 0){
                setTimeout(()=>{
                    self.callback.forEach(item =>{
                        item.onRejected();
                    })
                },0)
            }
        }
        // 判断执行器是否存在异常 如果存在异常 则执行错误方法
        try{
            actuator(resolve,reject)
        }catch (e) {
            reject(e)
        }
    }
    // then方法为核心方法  传递两个回调函数 成功、失败
    then(onResolved,onRejected){
        // 判断这两个函数 都否为函数 如果不是则 使其为一个函数
        onResolved = typeof onResolved === "function" ? onResolved : value => value;
        onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason};
        // 保存this
        const self = this;
        // 返回一个新的promise
        return new Promise((resolve,reject)=>{
            // handle函数 主要是判断then方法传递的回调函数执行的返回值的状态
            // 判断是promise 还是 普通值 还是错误 且让新的promise的状态为返回值的状态
            function handle(cb) {
                try{
                    // 执行回调获取返回值
                    const result = cb(self.data);
                    // 修改新的promise状态
                    if(result instanceof Promise){
                        result.then(resolve,reject);
                    }else{
                        resolve(result);
                    }
                }catch (e) {
                    reject(e);
                }
            }
            // 判断当前的promise的状态 使用handle函数 处理对应的then方法的回调函数
            if(self.status === PENDING){ // 等待状态
                self.callback.push({
                    // 由于在promise中的resolve、reject函数中会执行onResolve与onRejected 但是 新的promise没有办法通过promise中的执行结果而改变状态 因此 在then中改变对应的状态
                    onResolved(){
                        handle(onResolved);
                    },
                    onRejected(){
                        handle(onRejected);
                    }
                });
            }else if(self.status === RESOLVED){ // 成功状态
                setTimeout(()=>{
                    handle(onResolved);
                },0)
            }else{ // 失败状态
                setTimeout(()=>{
                    handle(onRejected);
                },0)
            }
        })
    }
}

 

new Promise((resolve,reject)=>{
            resolve(0);
        }).then(value => {
            console.log(value);
            return new Promise((resolve,reject)=>{
                // resolve(1);
                reject(5);
            })
        },err=>console.log(err)).then(value=>console.log(value),err=>console.log(err));
/* 结果为
  0 
  5
*/