Promise.then详解

一、Promisethen返回值

在JavaScript中，Promise对象是解决异步编程的一种解决方案，它的优点在于可以让代码更加简洁，使得回调函数嵌套的问题得到解决。而then方法是Promise对象中最重要的一个方法。它接收两个参数，一个是成功时的回调函数，一个是失败时的回调函数。在调用了then方法后，它将返回一个新的Promise对象，这个新Promise对象的状态和值是由当前Promise对象所完成的操作结果决定的。


let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res); // 输出：成功
});

在上述代码中，promise对象p调用了then方法，因为p对象状态为resolve，所以会执行then方法的成功回调函数，并返回一个新的Promise对象q对象。在成功的回调函数里打印出结果“成功”，因此输出的结果是“成功”。

二、Promisethenl

在then方法的回调函数中，我们可以继续返回一个新的Promise对象，这就是then链的概念。返回的新的Promise对象状态和值决定了下一个then方法回调函数的执行，我们称之为Promise的链式调用。


let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 输出：成功
  return '返回成功';
}).then(res => {
  console.log(res);  // 输出：返回成功
});

在上面的例子中，在第一个then返回的新的Promise对象的状态为resolve，并返回了值“返回成功”，因此将会执行第二个then的回调函数，并输出返回值为“返回成功”。这便是Promise的链式调用。

三、Promisethen的参数

在Promise.then方法中，除了可以接收成功和失败的回调函数之外，还可以接收第二个参数，即当前Promise对象错误时的回调函数。


let p = new Promise((resolve, reject) => {
  reject('出现错误');
});

p.then(res => {
  console.log(res);
}, err => {
  console.log(err);  // 输出：出现错误
});

在上述代码中，Promise对象p在创建时reject了一个值为“出现错误”的错误对象，因此会执行then方法中的错误回调函数，打印出错误值为“出现错误”。

四、Promisethen里面的方法自动执行

在Promise的then链中，除了可以返回一个新的Promise对象，还可以返回一个普通的值（非Promise对象）或者是一个返回值为Promise对象的函数，这个返回值为Promise对象的函数，将会被自动调用执行。


let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 输出：成功
  return new Promise((resolve, reject) => {
     setTimeout(() => {
      resolve('两秒后成功');
    }, 2000);
  });
}).then(res => {
  console.log(res);  // 输出：两秒后成功
});

在上述代码中，成功回调函数返回了一个延时为2秒的Promise对象，当这个Promise对象状态为resolve时，将继续执行下一个then方法的回调函数打印出值“两秒后成功”。这里可以看到返回值为Promise对象的函数才会自动调用执行，而普通值并没有这个效果。

五、Promisethen和catch结合

在Promise的链式调用中，如果一个then方法里的回调函数出现了异常或者是返回了一个reject结果，那么这个异常或者reject结果并不会触发下一个then方法中的错误回调函数，而是需要将错误回调函数放到这个出错的then以及之前的then的结尾，并使用catch方法进行统一的处理。


let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 输出：成功
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('两秒后失败');
    }, 2000);
  });
}).then(res => {
  console.log(res);  // 没有执行
}).catch(err => {
  console.log(err);  // 输出：两秒后失败
});

在上述代码中，第一个then中的延时的Promise状态为reject，并且返回了错误值“两秒后失败”，因此执行了catch方法中的错误回调函数，打印出错误值“两秒后失败”。

原创文章，作者：GHCFN，如若转载，请注明出处：https://www.506064.com/n/313254.html