ES6-Promise下

六。实例的finally方法：

promise状态发生变化指的是由初始态变成成功或者失败态

处理错误指的是没有调用catch（失败态实例调用可以执行其回调的then）

finally里面的回调函数只要promise状态发生变化就会执行，但是接收不到参数

这里没有调用then方法，也会报错吗？什么时候报错？

应用场景：处理最终状态，比如js操作数据库，涉及异步操作，可以用promise，最终需要关闭数据库不论成功或者失败

finally的本质：

        new Promise(function (resolve, reject) {

            // resolve(1);

            reject('reason');

        }).finally(function () {

            console.log(1);

        });

        // 相当于下面

        new Promise(function (resolve, reject) {

            // resolve(1);

            reject('reason');

        })

            .then(

                result => {

                    console.log(1);

                    return result;

                },

                err => {

                    console.log(1);

                    return new Promise(function (resolve, reject) {

                        reject(err);

                    });

                }

            );

finally源码

      // 1.什么时候finally里面的回调执行

      // 当 Promise 状态发生变化时，不论如何变化都会执行，不变化不执行

      // new Promise((resolve, reject) => {

      //   // resolve(123);

      //   reject('reason');

      // })

      //   .finally(data => {

      //     console.log(data);

      //   })

      //   .catch(err => {});

      // 2.本质

      // finally() 本质上是 then() 的特例

      // new Promise((resolve, reject) => {

      //   // resolve(123);

      //   reject('reason');

      // })

      //   .finally(data => {

      //     console.log(data);

      //   })

      //   .catch(err => {});

      // 等同于

      new Promise((resolve, reject) => {

        // resolve(123);

        reject('reason');

      })

        .then(

          result => {

            return result;

          },

          err => {

            return new Promise((resolve, reject) => {

              reject(err);

            });

          }

        )

        .then(data => {

          console.log(data);

        })

        .catch(err => {

          console.log(err);

        });

七。构造函数Promise的方法

1.Promise.resolve()和Promise.reject()

注意，也不一定Promise.resolve()返回的就是成功状态p，看下面传有then方法的一般对象；

所以data接收的参数是p1实例里resolve的参数，也就是由p1接手了；

疑问：（前面已经解答）

解释为什么有这两个函数

同步异步定时器问题，去掉return问题前面的，为什么有的等1秒，有的不等

注意，挂起的then里面的回调会等当前的正在主车道执行的代码执行完再执行；

源码

    <script>

      // 1.Promise.resolve()

      // 是成功状态 Promise 的一种简写形式

      // new Promise(resolve => resolve('foo'));

      // // 简写

      // Promise.resolve('foo');

      // 参数

      // 一般参数

      // Promise.resolve('foo').then(data => {

      //   console.log(data);

      // });

      // Promise

      // 当 Promise.resolve() 接收的是 Promise 对象时，直接返回这个 Promise 对象，什么都不做

      // const p1 = new Promise(resolve => {

      //   setTimeout(resolve, 1000, '我执行了');

      //   // setTimeout(() => {

      //   //   resolve('我执行了');

      //   // }, 1000);

      // });

      // Promise.resolve(p1).then(data => {

      //   console.log(data);

      // });

      // 等价于

      // p1.then(data => {

      //   console.log(data);

      // });

      // console.log(Promise.resolve(p1) === p1);

      // 当 resolve 函数接收的是 Promise 对象时，后面的 then 会根据传递的 Promise 对象的状态变化决定执行哪一个回调

      // new Promise(resolve => resolve(p1)).then(data => {

      //   console.log(data);

      // });

      // 具有 then 方法的对象

      // function func(obj) {

      //   obj.then(1, 2);

      // }

      // func({

      //   then(resolve, reject) {

      //     console.log(a, b);

      //   }

      // });

      // const thenable = {

      //   then(resolve, reject) {

      //     console.log('then');

      //     resolve('data');

      //     // reject('reason');

      //   }

      // };

      // Promise.resolve(thenable).then(

      //   data => console.log(data),

      //   err => console.log(err)

      // );

      // console.log(Promise.resolve(thenable));

      // 2.Promise.reject()

      // 失败状态 Promise 的一种简写形式

      // new Promise((resolve, reject) => {

      //   reject('reason');

      // });

      // 等价于

      // Promise.reject('reason');

      // 参数

      // 不管什么参数，都会原封不动地向后传递，作为后续方法的参数

      // const p1 = new Promise(resolve => {

      //   setTimeout(resolve, 1000, '我执行了');

      // });

      // Promise.reject(p1).catch(err => console.log(err));

      new Promise((resolve, rejcet) => {

        resolve(123);

      })

        .then(data => {

          // return data;

          // return Promise.resolve(data);

          return Promise.reject('reason');

        })

        .then(data => {

          console.log(data);

        })

        .catch(err => console.log(err));

    </script>

2.Promise.all()方法

注意，参数里面有rejected实例的情况，只要根据代码执行顺序识别到有一个rejected实例，那么下图的p就变成失败态且接收识别到的失败态reject里面的参数a

等价于const p = Promise.reject(a),p和识别的那个rejected实例不是一个实例，只是参数和状态一样；

还有p由p1p2决定，p1p2赋值还未完成，所以p的赋值也未完成，同步执行时，定时器还没执行，delay函数return出去的也是暂时的，所以pp1p2也是暂时的pending状态,异步执行完毕，return后面的值刷新，delay（1000）delay（2000）的返回值也刷新，pp1p2的赋值也刷新；

如果all里面参数若为空数组的话，默认返回实例状态为成功

  <script>

    // 1.有什么用

    // Promise.all() 关注多个 Promise 对象的状态变化

    // 传入多个 Promise 实例，包装成一个新的 Promise 实例返回

    // 2.基本用法

    const delay = ms => {

      return new Promise(resolve => {

        setTimeout(resolve, ms);

      });

    };

    const p1 = delay(1000).then(() => {

      console.log('p1 完成了');

      // return 'p1';

      return Promise.reject('reason');

    });

    const p2 = delay(2000).then(() => {

      console.log('p2 完成了');

      return 'p2';

      // return Promise.reject('reason');

    });

    // Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关

    // 所有状态都变成 resolved，最终的状态才会变成 resolved

    // 只要有一个变成 rejected，最终的状态就变成 rejected

    const p = Promise.all([p1, p2]);

    p.then(

      data => {

        console.log(data);

      },

      err => {

        console.log(err);

      }

    );

  </script>

3.Promise.race() 和 Promise.allSettled()

取决于第一个，并不是全等第一个只是状态和参数一样；

关于异步程序执行顺序还有很多不懂（异步没写完）

    <script>

      const delay = ms => {

        return new Promise(resolve => {

          setTimeout(resolve, ms);

        });

      };

      const p1 = delay(1000).then(() => {

        console.log('p1 完成了');

        return 'p1';

        // return Promise.reject('reason');

      });

      const p2 = delay(2000).then(() => {

        console.log('p2 完成了');

        // return 'p2';

        return Promise.reject('reason');

      });

      // 1.Promise.race()

      // Promise.race() 的状态取决于第一个完成的 Promise 实例对象，如果第一个完成的成功了，那最终的就成功；如果第一个完成的失败了，那最终的就失败

      // const racePromise = Promise.race([p1, p2]);

      // racePromise.then(

      //   data => {

      //     console.log(data);

      //   },

      //   err => {

      //     console.log(err);

      //   }

      // );

      // 2.Promise.allSettled()

      // Promise.allSettled() 的状态与传入的Promise 状态无关

      // 永远都是成功的

      // 它只会忠实的记录下各个 Promise 的表现

      const allSettledPromise = Promise.allSettled([p1, p2]);

      allSettledPromise.then(data => {

        console.log('succ', data);

      });

    </script>

4.Promise.any()

4-7 图文节-慕课网体系课 (imooc.com)

八。Promise注意事项

    <script>

      // 1.resolve 或 reject 函数执行后的代码

      // 推荐在调用 resolve 或 reject 函数的时候加上 return，不再执行它们后面的代码

      // new Promise((resolve, reject) => {

      //   // return resolve(123);

      //   return reject('reason');

      //   console.log('hi');

      // });

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

      // 参数如果不是 Promise 数组，会将不是 Promise 的数组元素转变成 Promise 对象

      // Promise.all([1, 2, 3]).then(datas => {

      //   console.log(datas);

      // });

      // 等价于

      // Promise.all([

      //   Promise.resolve(1),

      //   Promise.resolve(2),

      //   Promise.resolve(3)

      // ]).then(datas => {

      //   console.log(datas);

      // });

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

      // 数组、字符串、Set、Map、NodeList、arguments

      // Promise.all(new Set([1, 2, 3])).then(datas => {

      //   console.log(datas);

      // });

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

      const delay = ms => {

        return new Promise(resolve => {

          setTimeout(resolve, ms);

        });

      };

      const p1 = delay(1000).then(() => {

        console.log('p1 完成了');

        // return 'p1';

        return Promise.reject('reason');

      });

      // .catch(err => {

      //   console.log('p1', err);

      // });

      const p2 = delay(2000).then(() => {

        console.log('p2 完成了');

        return 'p2';

        // return Promise.reject('reason');

      });

      // // .catch(err => {

      // //   console.log('p2', err);

      // });

      const allPromise = Promise.all([p1, p2]);

      allPromise

        .then(datas => {

          console.log(datas);

        })

        .catch(err => console.log(err));

      // 错误既可以单独处理，也可以统一处理

      // 一旦被处理，就不会在其他地方再处理一遍

    </script>

九。promise应用

异步加载图片，停留在当前图片时，趁这个时间浏览器从服务器端加载其他资源，图片，然后点击切换按钮想要切换图片时，就可以显示到页面（通过dom），并不是点击切换才去服务器端加载这个图片

promise里的回调一般不写逻辑，一般写的是什么时候调用resolve或者reject；

如果不用promise的话，就会加两个形参接收回调函数，一个负责图片加载成功该怎么办，一个负责图片加载失败

注意img这里是个对象，是Image构造出来的实例，和dom对象没关系

注意这里的SRC属性是实例img的属性和html dom元素的SRC属性不一样

const img = new Image()只是实例化创建了一个img标签，也可以通过appendchild加入到html结构里

注意img.src=url，src属性值变化就能触发onload和onerror事件，img.src=url这个代码的作用就是一个工具，作用是像服务端发请求拿资源，这就是异步加载图片；

如果传进来的url并没有请求到图片，就会触发error事件

实际开发过程中，可能是点击按钮才切换图片；

如果图片加载失败（url错误）会有这个提示：

    <style>

      #img {

        width: 80%;

        padding: 10%;

      }

    </style>

  </head>

  <body>

    <img

      src="https://img.mukewang.com/5e6af63d00011da318720764.jpg"

      alt=""

      id="img"

    />

    <script>

      // 异步加载图片

      const loadImgAsync = url => {

        return new Promise((resolve, reject) => {

          const img = new Image();

          img.onload = () => {

            resolve(img);

          };

          img.onerror = () => {

            reject(new Error(`Could not load image at ${url}`));

          };

          img.src = url;

        });

      };

      const imgDOM = document.getElementById('img');

      loadImgAsync('https://2img.mukewang.com/5f057a6a0001f4f918720764.jpg')

        .then(img => {

          console.log(img.src);

          setTimeout(() => {

            imgDOM.src = img.src;

          }, 1000);

        })

        .catch(err => {

          console.log(err);

        });

    </script>

①代码执行loadImgAsync('https://2img.mukewang.com/5f057a6a0001f4f918720764.jpg')时，就会创建img对象，并给img对象赋予具体的src地址：

②此时就会开启网络请求，去网络中某一个具体的位置请求图片，即异步加载图片。图片加载完，就会继续执行如下：

由于图片所在的服务器响应特别快，并且我们的网络特别给力、电脑性能也特别好，因此加载图片这个异步过程会迅速完成，看上去和使用本地图片一样快。但是假设图片所在的服务器响应很慢，那么图片就会很慢的请求回来，举个常见的现象：某些网站，打开后，图片迟迟不展示，此时速度上，就有差异了。

十。如何统一处理错误？Promise参与过程中什么时候会报错？Promise.all等方法返回值是新的promise实例，和传进来的无关；

1.如何统一处理错误：

------------------------------------------------------------------------------------------------------------------------------------------------------

十一。async和await （使得异步操作变得更加方便。）

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

调用async函数时，会立即返回一个Promise对象。

注意await后面放的是一个可以求值的东西（函数调用等）

等待Promise返回结果: ，如果跟的是promise实例这种情况，会等Promise实例过程中的所有代码全部执行完毕（不论同步异步）如果最终状态为成功态，执行该函数体后面的代码（打印end）

如果最终是失败态实例，该函数体后面的代码（打印end）不会执行且会报错；如果最终是pending状态，该函数体后面的代码（打印end）也不会执行

巴特西

ES6-Promise下

最新文章

热门文章