Vue中的finally方法详解

在Vue.js中，我们经常会使用异步操作来处理数据请求、计时器等操作。在处理异步操作时，我们通常会使用then和catch来分别处理异步操作成功和失败的情况。然而，在某些情况下，我们希望无论异步操作的结果如何，都能执行一些特定的操作。这就是Vue中的finally方法派上用场的地方。

1. 异步操作和Promise

在深入讨论finally方法之前，我们需要了解一些基本的概念。一个异步操作是指在任务执行期间，程序会继续执行其他操作，而不是等待任务完成后再继续执行。异步操作通常返回一个Promise对象。

Promise是ES6中引入的一种处理异步操作的方式。它提供了一种更加优雅和易于管理的方式来处理异步代码。Promise对象有三种状态：pending、fulfilled和rejected。当异步操作还在进行中时，Promise的状态为pending；当操作成功完成时，Promise的状态为fulfilled；当操作失败时，Promise的状态为rejected。

一个基本的Promise使用示例：

const promise = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('操作成功');
  } else {
    reject('操作失败');
  }
});

promise
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

2. finally方法的作用

在Vue中，我们使用的是axios库来进行网络请求。axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它的finally方法被用来在Promise结束时执行一些特殊的操作。

2.1 语法

finally方法的语法如下：

promise.finally(onFinally)

其中，promise是一个Promise对象，onFinally是一个回调函数，用来执行在Promise结束时要执行的操作。

2.2 特性

finally方法具有以下特性：

finally方法返回一个新的Promise对象，该对象的状态和原来的Promise对象一致。
不管Promise对象是fulfilled还是rejected，finally方法指定的回调函数都会执行。
如果回调函数的返回值是Promise对象，则会等待该Promise对象的结束，并继续传递状态和值。

3. 实例

下面，我们通过一些实例来更好地理解finally方法的使用。

3.1 异步操作成功

const promise = new Promise((resolve, reject) => {
  resolve('操作成功');
});

promise
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log('无论操作成功还是失败，都会执行finally操作');
  });

上述代码中，不管异步操作成功还是失败，最后的finally方法会被执行。

3.2 异步操作失败

const promise = new Promise((resolve, reject) => {
  reject('操作失败');
});

promise
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log('无论操作成功还是失败，都会执行finally操作');
  });

上述代码中，不管异步操作成功还是失败，最后的finally方法都会被执行。

3.3 `finally`方法返回Promise对象

const promise = new Promise((resolve, reject) => {
  resolve('操作成功');
});

promise
  .then(response => {
    console.log(response);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('新的Promise对象');
      }, 1000);
    });
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log('无论操作成功还是失败，都会执行finally操作');
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('新的Promise对象');
      }, 1000);
    });
  })
  .then(response => {
    console.log(response);
  });

上述代码中，finally方法返回了一个新的Promise对象。在finally方法中，我们使用setTimeout模拟了一个异步操作。最终，then方法中的回调函数会等待finally方法中的Promise对象结束，并继续传递状态和值。