Promise

1 为什么使用Promise

1. Promise是异步编程的一种解决方案。
2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3. 可以在对象之间传递和操作promise，帮助我们处理队列

1.1 异步回调的问题

1. 之前处理异步是通过纯粹的回调函数的形式进行处理；
2. 很容易进入到回调地狱中，剥夺了函数return的能力；
3. 问题可以解决，但是难以读懂，维护困难；
4. 稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护；

1.2 什么时候会来处理异步事件呢？

1. 一种很常见的场景应该就是网络请求了。
2. 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
3. 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
4. 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。

1.3 网络请求的回调地狱

我们来考虑下面的场景(有夸张的成分)：

我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2。

我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3。

我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4。

发送网络请求url4，获取最终的数据data4

上面的代码有什么问题吗？

正常情况下，不会有什么问题，可以正常运行并且获取我们想要的结果。

但是，这样额代码难看而且不容易维护。

我们更加期望的是一种更加优雅的方式来进行这种异步操作。

如何做呢？就是使用Promise。

Promise可以以一种非常优雅的方式来解决这个问题。

2 什么是Promise

    promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）；并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据；

<script>
    //promise
    //创建promise对象的实例时，构造函数需要接收一个函数作为参数
    //该函数需要接收两个函数作为参数
    //resolve  函数
    //reject   函数
    /*promise状态：
        pending   进行中
        fullfilled  已成功     resolved  成功     执行 resolve函数
        rejected    已失败     rejected  失败     执行 reject函数
    */
    let p=new Promise(function(resolve,reject){
      //异步请求
      setTimeout(()=>{
        console.log('run');
        // resolve();//成功了
        reject();
      },100);
    });

    // console.log(p);
    //then方法的第一个参数，是resolve函数的实现
    //then方法的第二个参数是reject函数的实现
    p.then(()=>{
      console.log('sucess');
    },()=>{
      console.log('error');
    });
  </script>

介绍

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

2.1 假如在.then()的函数里面不返回新的promise，会怎样？

.then()

1. 接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2. .then()返回一个新的Promise实例，所以它可以链式调用
3. 当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4. 状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5. 如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6. 如果返回其他任何值，则会立即执行下一级.then()

.then()里面有.then()的情况

1. 因为.then()返回的还是Promise实例
2. 会等里面的then()执行完，再执行外面的

2.2 Promise错误处理

Promise会自动捕获内部异常，并交给rejected响应函数处理。

1 第一种错误处理

<script>
	new Promise((resolve) => {
            setTimeout(() => {
                throw new Error('bye')
            }, 2000)
        }).then((val) => {
            console.log(val)
        })
        .catch(error => {
            console.log('Error', error)
        })
</script>

2 第二种错误处理

<script>
          new Promise((resolve, reject) => {
        setTimeout(()=>{
            reject('error')
        },1000)
    }).then(data=>{
        console.log(data)
    },err=>{
        console.log(err)
    })
</script>