promise-基础

Posted 2021-12-03 web半晨

目录

• 1、回调地狱
• • 1.1、概念
  • 1.2、回调地狱的缺点
  • 1.3、代码
• 2、解决回调地狱
• • 2.1、Promise的基本概念
  • • 2.1.1、Promise是一个构造函数
    • 2.1.2、Promise.prototype上包含一个.then()方法
    • 2.1.3、.then()方法用来预先指定成功和失败的回调函数
  • 2.2、.then()方法的特性
  • 2.3、通过.catch捕获错误

---

1、回调地狱

1.1、概念

多层回调函数的相互嵌套，就形成了回调地狱。

---

1.2、回调地狱的缺点

1.2.1、代码耦合性太强，牵一发而动全身，难以维护。
1.2.2、大量冗余的代码相互嵌套，代码的可读性变差。

1.3、代码

setTimeout(() => {
    console.log('延迟1秒');
    setTimeout(() => {
        console.log('延迟2秒');
        setTimeout(() => {
            console.log('延迟3秒');
        }, 3000);
    }, 2000);
}, 1000);

---

2、解决回调地狱

2.1、Promise的基本概念

2.1.1、Promise是一个构造函数

● 我们可以创建 Promise 的实例 const p = new Promise()
● new 出来的 Promise 实例对象，代表一个异步操作

---

2.1.2、Promise.prototype上包含一个.then()方法

● 每一次 new Promise() 构造函数得到的实例对象，
● 都可以通过原型链的方式访问到 .then() 方法，例如 p.then()

---

2.1.3、.then()方法用来预先指定成功和失败的回调函数

● p.then(成功的回调函数，失败的回调函数)
● p.then(result => { }, error => { })
● 调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

---

2.2、.then()方法的特性

如果上一个.then()方法中返回了一个新的Promise实例对象，则可以通过下一个.then()继续进行处理。通过.then()方法的链式调用，就解决了回调地狱的问题。

---

2.3、通过.catch捕获错误

在Promise的链式操作中如果发生了错误，可以使用Promise.prototype.catch方法进行捕获和处理。
如果不希望前面的错误导致后续的.then()无法正常执行，则可以将.catch的调用提前。

function func1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("func1 1000");
    }, 1000);
  });
};

function func2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("func1 2000");
    }, 2000);
  });
};

function func3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("func1 3000");
    }, 3000);
  });
};

func1()
 .catch(err => { console.log(err); })
 .then((result) => {
    console.log(result);
    return func3();
  })
 .then((result) => {
    console.log(result);
   return func2();
  })
 .then((result) => {
    console.log(result);
  });