Promise的理解（面试题）

⑴promise是异步操作的一种解决方案，一般用来解决层层嵌套的回调函数（回调地狱 callback hell）的问题。

⑵基本用法

①只能通过构造函数实例化创建。const p = new Promise((resolve，reject) => {})，参数是一个回调函数，回调函数中的这两个参数也都是回调函数。

②三种状态：初始状态是pending（进行中）、执行resolve后由pending变成fulfilled（或者resolved 表示已成功）、执行reject后 ， 由pending变成rejected(已失败）。状态一旦改变，就不会再改变了，比如先执行resolve()，状态变化为fulfilled，再执行reject()，状态变化也不会改变，也是fulfilled

③promise的实例对象方法then():

then(()=> {},()=> {});

then方法也有2个参数（回调函数），当状态是pending->fulfilled时，执行第一个回调函数；当状态是pending->rejected时，执行第二个回调函数；   resolve和reject是可以传入参数的，传入参数后，then状态对应的回调函数也会传入该参数。then方法执行后返回一个新的Promise对象。输出then方法，返回的promise对象的状态改变，是pending状态。在then的回调函数中，return 后面的东西，会用promise包装一下，默认返回的永远是resolve的成功状态。return 123；等价于 return new Promise((resolve,reject) => {

resolve(123);reject(123)})

④解决回调地狱；不加return，默认返回成功状态的promise，加上return之后就会根据上一个return返回的promise状态来执行。

⑤catch()方法

专门用来处理rejected状态，本质是then的特例。

用法：catch(err => {console.log(err)})等价于then(null, err => {console.log(err)})。可以捕获它前面的错误，这样可以处理Promise内部的错误。

⑥finally()方法

 用来处理最终状态的。本质上是then()的特例。该方法不论任何变化都会执行（不变化不执行），最终执行。

⑦promise.resolve()和promise.reject()

Promise.resolve()是成功状态Promise的一种简写形式,当Promise.resolve()接收的是Promise对象时，直接返回这个对象，什么都不做。当实例化时resolve()接收的是Promise对象，后面的then会根据传递的Promise对象的状态变化决定执行哪一个回调,然后就立即执行thenable对象的then方法。

Promise.reject()是失败状态Promise的一种简写形式,不管什么参数，都会原封不动的向后传递，作为后续方法的参数。

⑧Promise.all()用来关注多个Promise对象的变化的,传入多个promise实例，包装成一个新的promise实例返回。Promise.all()参数可以是数组。

Promise.all()的状态变化与所有传入Promise实例对象状态有关，所有的状态都变成resolved，最终的状态才会变成resolved，只要有一个变成rejected，最终的状态就变成rejected。

⑨Promise.race()的状态取决于第一个完成的Promise对象，如果第一个完成的成功了，那么最终的就成功，否则最终失败。

Promise.allSettled()的状态与传入的Promise状态无关，它永远都是成功状态的，它只会记录下各个Promise的表现。

⑩Promise.any()

参数中的Promise都失败最终才会失败

参数中只要有一个为成功状态，那么最终就是成功

返回是第一个成功的值，后面就不管了

实际应用：一次性加载多张图片时，哪一张先加载出来就显示哪一张，此时就可以使用Promise.any()方法

⑶注意事项

resolve或reject执行后的代码可以执行代码，但不推荐，因为当resolve或reject执行后，过程是结束了的，其余操作应该在then中操作。

Promise.all/race/allSettled的参数问题：

如果参数不是promise数组，会将不是promise的数组元素转变为promise对象。

不只是数组，任何可遍历的都可以作为参数。

Promise.all/race/allSettled的错误处理：

1、每一个Promise都添加catch

2、最后统一处理，但只会处理一次

错误即可以单独处理，也可以统一处理，一旦被处理就不会在其他地方再处理一遍。

⑷应用：异步加载图片，代码如下

<script>
        // 获取元素
        const body = document.querySelector('body');
        // 封装函数，使用promise对象实现异步加载图片的功能
        // 将图片地址url作为函数参数
        const loadImg = url => {
            return new Promise((resolve, reject) => {
                // 构造函数创建新的图片元素
                const img = new Image();
                // 监听图片加载成功
                img.onload = () => {
                    // 添加新的图片元素
                    setTimeout(() => {
                        // body里面添加img
                        body.appendChild(img);
                        resolve(img);
                    }, 1000)
                };
                // 监听图片加载失败
                img.onerror = () => {
                    reject('地址错误');
                };
                // 将URL参数赋值给新创建的图片元素
                img.src = url;
            });
        };
// URL1 URL2 URL3指的是图片的地址
        loadImg(URL1).then(() => {
            return loadImg(URL2).then(() => {
                return loadImg(URL3);
            })
        });
    </script>

1. promise三种状态？

初始状态是pending（进行中）、执行resolve后由pending变成fulfilled（或者resolved 表示已成功）、执行reject后 ， 由pending变成rejected(已失败）。状态一旦改变，就不会再改变了，比如先执行resolve()，状态变化为fulfilled，再执行reject()，状态变化也不会改变，也是fulfilled

2. Then方法中return的作用？

then方法执行后返回一个新的Promise对象。输出then方法，返回的promise对象的状态改变，是pending状态。在then的回调函数中，return 后面的东西，会用promise包装一下。如果不加return默认返回的永远是resolve的成功状态；加上return后，下一个then就会根据上一个return返回的promise状态来进行。

3. Promise.all()和promise.race()、promise.any()的区别？

（1）Promise.all()用来关注多个Promise对象的变化的,传入多个promise实例，包装成一个新的promise实例返回。Promise.all()参数可以是数组。Promise.all()的状态变化与所有传入Promise实例对象状态有关，所有的状态都变成resolved，最终的状态才会变成resolved，只要有一个变成rejected，最终的状态就变成rejected。

（2）Promise.race()的状态取决于第一个完成的Promise对象，如果第一个完成的成功了，那么最终的就成功，否则最终失败。

Promise.allSettled()的状态与传入的Promise状态无关，它永远都是成功状态的，它只会记录下各个Promise的表现。

（3）Promise.any()

参数中的Promise都失败最终才会失败

参数中只要有一个为成功状态，那么最终就是成功

返回是第一个成功的值，后面就不管了

实际应用：一次性加载多张图片时，哪一张先加载出来就显示哪一张，此时就可以使用Promise.any()方法。

 4. 总结Promise.resolve()方法参数的几种情况

⑴参数是一个promise实例。如果参数时promise实例那么Promise.resolve()将不做任何修改、原封不动地返回这个实例

⑵参数是一个thenable对象。如果参数是具有then方法的对象，会将这个对象转为promise对象，然后立即执行thenable对象的then方法。

⑶参数不是具有then方法的对象，或者根本不是对象，则返回一个新的promise对象，状态为resolved。

⑷不带有任何参数。Promise.resolve()方法允许调用时不带参数，直接返回就一个resolved状态的promise对象，所以如果希望得到一个promise对象，比较方便的方法就是直接调用Promise.resolve()方法。