Promise入门到精通(初级篇)-附代码详细讲解

? ????Promise，中文翻译为承诺,约定,契约，从字面意思来看，这应该是类似某种协议，规定了什么事件发生的条件和触发方法。

? ????Promise的诞生和一个词有关，就是异步

? ????什么是异步？？?

? ????首先javascript是运行在浏览器端的语言，必须依赖javascript引擎来解析并执行代码，js引擎是单线程，也就是一个任务接着一个任务来执行程序，这种单线程很容易因为一个任务发生延迟，造成整体的耗时变长，为了解决这个问题，所以就有了异步这个概念。

? 异步就是当系统执行一个事件的时候，不会等待该事件结束，而是会去继续执行其他事件，当这个异步事件有了响应结果之后，系统会在空闲的时候继续执行该事件。

?????简单来说就是js引擎会首先判断该事件是同步任务还是异步任务，如果是同步任务，将该事件压入宏任务队列中排队等待执行，如果是异步事件，则进入微任务队列中等待宏任务队列处于空闲状态时，再将微任务队列中的事件移入宏任务队列执行。这样我们就可以把不确定执行时间的一些事件用异步来执行。提高了程序运行的效率，

Promise的核心概念

? ????Promise中的核心概念是状态，状态转换就是Promise执行异步事件的时机

? ????在Promise中有存在3种状态，分别对应的是:

? ????1、等待（padding）

? ????2、承诺实现（fulfilled）

? ????3、承诺失效（reject）

? ????Promise初始状态只能为等待的padding状态，在适当的时机，我们可以选择改变padding的状态到fulfilled或者reject。

? ?????? Promise中的状态是不可逆转的，且仅允许改变一次,所以无法从fulfilled或reject状态再次切换到其他状态。当初始的padding改变为fulfilled或reject后，该Promise就相当于完成了它的使命，后续的异步处理就会交由一个then( )的方法来实现。

Promise的基本构成

? ????在ES6语法中，Promise是一个构造函数，使用时需要用new关键词来创建实例对象。Promise构造函数中自带excutor执行器，excutor执行器中有2个JavaScript中默认的函数参数resolve，reject

? ????resolve函数的作用是当Promise状态从padding转换到resolve时,可以把Promise中的对象或者变量当成参数传递出来供异步成功时调用，reject函数的作用是当Promise状态从padding转换到reject时候可以把Promise中的对象或者变量，以及系统报错当成参数传递出来供异步失败时调用。

? ????then是Promise原型上的一个方法，Promise.prototype.then() 所以通过构造函数创建的Promise实例对象也会自带then( )方法。then( )方法接受2个函数参数，作为Promise中异步成功和异步失败的2个回调函数。

? Promise实例的基本代码结构：

//ES6 箭头函数写法
let promise = new Promise((resolve,reject)=>{
    if(/判断条件/){
        resolve()//承诺实现
    }else{
				reject()//承诺实效
    }
})
promise.then(res=>{
		//处理承诺实现方法
},err=>{
    //处理承诺失效方法     
})

console.log('步骤1');
new Promise((resolve,reject)=>{
    console.log('步骤2');
})
console.log('步骤3')

//执行结果
### 步骤1
### 步骤2
### 步骤3

console.log('步骤1');
new Promise((resolve,reject)=>{
    console.log('步骤2');
    resolve()
}).then(res=>{
    console.log('步骤3');
})
console.log('步骤4')

//执行结果
### 步骤1
### 步骤2
### 步骤4
### 步骤3

let promise new Promise ((resolve,reject)=>{
  reject('发生错误了')
})
promise.catch(err=>{
  console.log(err)
})
//执行结果
### 发生错误了

let promise new Promise ((resolve,reject)=>{
  throw ('发生错误了')
})
promise.catch(err=>{
  console.log(err)
})
//执行结果
### 发生错误了

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve()
    },100)
}).then(res=>{
    console.log('我成功了');
})


let promise2 = new Promise((resolve,reject)=>{
    resolve()
}).then(res=>{
    console.log('我也成功了');
})

//执行结果
### 我也成功了
### 我成功了

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve()
    },100)
}).then(res=>{
    console.log('我成功了');
    return new Promise((resolve,reject)=>{
        resolve()
    })
}).then((res)=>{
    console.log('我也成功了');
})

//执行结果
### 我成功了
### 我也成功了

let promise = new Promise((resolve,reject)=>{
    resolve()
}).then(res=>{
    
}).then(res=>{
    console.log('规则1');
})

//上述的原理等价于下面的写法????

let promise = new Promise((resolve,reject)=>{
    resolve()
}).then(res=>{
    return new Promise((resolve,reject)=>{
        resolve()
    })
}).then(res=>{
    console.log('规则1');
})

//执行结果
### 规则1

let promise = new Promise((resolve,reject)=>{
    resolve()
}).then(res=>{
    let str ='规则2'
    return str
}).then(res=>{
    console.log(res)
})

//上述的原理等价于下面的写法????

let promise = new Promise((resolve,reject)=>{
    resolve()
}).then(res=>{
    let str ='规则2'
    return new Promise((resolve,reject)=>{
        resolve(str)
    })
}).then(res=>{
    console.log(res)
})

//执行结果
### 规则2

function init (params) {
    let promise = new Promise((resolve,reject)=>{
        let num=params
        resolve(num)
    }).then(res1=>{
        return new Promise((resolve,reject)=>{
           res1>=5?resolve('大于等于5'):reject('小于5')
        })
    }).then(res2=>{
        console.log(res2);
    }).catch(err=>{
        console.log(err);
    })
}

//执行
init(10)
//执行结果
### 大于等于5

//执行
init(1)
//执行结果
###小于5

let promise = new Promise((resolve, reject) => {
    throw new Error('发生错误')
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

//执行结果
### 发生错误

let promise = new Promise((resolve, reject) => {
    resolve('规则5')
}).then().then().then(res=>{
    console.log(res);
})

//执行结果
### 规则5

 //用数组封装参数
let promise = new Promise((resolve,reject)=>{
            resolve([1,2])
        }).then(res=>{
            console.log(res);
        })
 //执行结果
 ### [1,2]
 
//直接传递多参数
  let promise = new Promise((resolve,reject)=>{
            resolve(1,2)
        }).then((num1,num2)=>{
            console.log(num1,num2);
        })
 //执行结果
 ### 1 undefined

let num=0

let callback = function (value,fn) {
    console.log(value);
    fn()
}

callback(num,()=>{
    num++
    callback(num,()=>{
        num++
        callback(num,()=>{
            num++
            callback(num,()=>{
                num++
                callback(num,()=>{
                    console.log('结束');
                })
            })
        })
    })
})

//执行结果
###
0
1
2
3
4
结束

let num=0
let promise = new Promise((resolve,reject)=>{
    console.log(num);
    resolve(++num)
}).then(res=>{
    console.log(res);
    return ++res
}).then(res=>{
    console.log(res);
    return ++res
}).then(res=>{
    console.log(res);
    return ++res
}).then(res=>{
    console.log(res);
}).then(res=>{
    console.log('结束');
})

//执行结果
###
0
1
2
3
4
结束

function init(fn) {
        let num = 1;
        fn && fn(num);
        /* 
            #### 其他业务代码
        */
        num += 1;
        fn && fn(num);
        //这个方法可能被错误的调用了2次
      }

init((num) => {
    console.log("我被调用了,输出" + num);
 });

//期望得到的结果
### 我被调用了，输出1
//实际得到的结果
### 我被调用了，输出1
### 我被调用了，输出2

function init(fn) {
        return new Promise((resolve,reject)=>{
            let num = 1;
            resolve(num)
            /*
             其他业务代码
            */
            num+=1
            resolve(num)
            resolve(num)
        }).then(res=>{
            fn && fn(res);
        })
      }

init((num) => {
   console.log("我被调用了,输出" + num);
 });

//程序在resolve()被执行后出现报错
let promise = new Promise((resolve,reject)=>{
         resolve()
         throw new Error('错误')
     }).then(res=>{
        
     },err=>{
         console.log(err);
     }).catch(err=>{
         console.log(err);
     })
//期待执行结果
###  Error: 错误
//实际执行结果
### 没有任何输出

//用try catch捕获错误方式
let promise = new Promise((resolve, reject) => {
        try {
          resolve();
          throw new Error("错误");
        } catch (error) {
          console.log(error);
        }
 });

//执行结果
### Error: 错误