promise的基本概念

promise的基本概念

1.产生的背景及原因

1.1 发布时间

​ 在2015年6月份发布的ES2015中正式出道(ES6)，在ES6中Promise被列为正式规范。作为ES6最终要的特性之一。

1.2 Promise是什么？

​ 复杂的概念先不说，首先需要知道Promise是个什么东西 ? 是一个数组？对象？还是一个函数？也不用瞎猜了，直接代码验证

console.dir(Promise)

​ 由上图中可以看出是Promise是一个函数，并且还是一个构造函数。并且还有几个经常使用的reject、resolve、all并且在函数的原型属性上还有then、cath、constructor等常用的Promise方法。

​ 竟然是一个构造函数，那么就可以使用new关键字进行实例化，创建一个promise对象。

2. Promise的使用

2.1 创建Promise对象

  let p = new Promise(function(resolve,reject){
            
  })

2.2 Promise的作用

1. Promise的主要作用是用来解决异步异步回调问题的，在Promise没有出现之前，如果异步任务比较多，并且代码下一段的代码执行是依赖于上一段代码的执行结果，就只能通过函数回调的方式进行，假如业务场景比较复杂，那么就会产生回调地狱。对于代码的维护及代码的可读性是一件非常痛苦的事情。
2. Promise的then方法支持链式调用，解决之前代码回调函数的书写方式，使代码更有条理性和逻辑性。

2.3 Promise的参数

​ 在说这个问题之前先说明下Promise的三种状态

2.3.1 Promise的状态

​ 还是通过上面的代码new一个Promise实例对象

 let p = new Promise(function(resolve,reject){
            
  })

1. pending(初始状态)

​ 通过浏览器的控制台可以清晰的看出，在Promise对象被实例化出来的时候的状态是pending。

​ pending翻译过来具有（待决的，待定的，待处理的）的意思。

2. resolved 或者 fulfilled （成功状态）

   对上面的代码进行一些简单的改造，让其执行一段异步代码，并且返回一个成功的回调

    let p = new Promise(function(resolve,reject){
               setTimeout(function() {
                   resolve(666)
               },1000)
    		})
   

   此时再次观察控制台，在一秒之后，完成异步代码的执行，查看Promise的状态为fulfilled。

3. rejsect(失败的)

   将第二步的代码中的成功回调换位失败的回调reject,由于失败的回调必须进行处理，可以放在.then的第二个回调中处理，也可以放在.cath中处理。这里放在.cath中处理

      let p = new Promise(function(resolve,reject){
               setTimeout(function() {
                   reject(666)
               },1000)
           })
           p.catch(err=>{
               console.log(err)
           })
   

   此时再次观察控制台，在一秒之后，完成异步代码的执行，输出错误的信息，查看Promise的状态为rejected。

总结：

​ Promise的三种状态

1. pending(初始状态)
2. resolved 或者 fulfilled （成功状态）
3. rejsect(失败的)

2.3.2 Promise的结果处理

​ 通过上面的操作可以知道Promise的构造函数接收一个参数，是一个函数，这个函数接收两个参数（resolve,reject），分别表示异步操作。分别在异步函数操作执行成功和失败时调用。同时会改变Promise的状态值。

​ 下面说说Promise对象身上的.then和.cath方法。

通过上面查看Promise是一个什么的时候在其原型上存在有.then和.cath两个方法以及.finally方法。emm…想必使用过jquery的小伙伴应该对于链式调用的用法用法应该不陌生。同样的在Promise中也支持这种方式。话不多说，先上代码。

接收resolve

  let p = new Promise(function(resolve,reject){
            setTimeout(function() {
                resolve(666)
            },1000)
        })
  p.then((res)=>{
      // 接收成功的回调
      console.log(res)//666
  })

​ 通过.then的调用便可以将resolve的值接收出来，

​ 到这里可能会问，如果发生错误怎么接收处理？不用着急，Promise贴心的为我们准备两种方法，第一种是通过.then的第二个回调函数接收。第二种方法是通过.cath方法来接收

// 第一种：通过.then的第二个回调函数接收
let p = new Promise(function(resolve,reject){
            setTimeout(function() {
                reject("错误信息")
            },1000)
        })
p.then((res)=>{
    // 接收成功的回调
    console.log(res)
},(err)=>{
    console.log(err)
})

// 第二种：通过.cath方法进行接收错误信息 
let p = new Promise(function(resolve,reject){
            setTimeout(function() {
                reject("错误信息")
            },1000)
        })
 p.then((res)=>{
     // 接收成功的回调
     console.log(res)
 }).catch((err)=>{
     console.log(err)
 })

​ 在第二种方法中可以发现，在使用.cath的时候可以在.then的后面继续的链式调用下去。只要上一个的.then中存在返回值那么便可以一直的调用下去

​ 注意：这里的上一个.then的返回值的意思是，假如是第一个参数的返回值，则会走下一个.then函数里，如果是第二个参数的返回值则会走下一个的.cath函数里

在Promise对象身上还有一个all方法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。

总结

Promise解决了曾经的回调地狱问题，通过简单明了的链式调用的方式完成了回调问题，用同步的方式写异步的代码。提供了统一的API,使得控制异步操作更加容易。