vue的.then()方法详解

Vue.js 中的 Promise 对象可以使用 `.then()` 方法来处理异步操作的结果。当 Promise 对象的状态变为成功时（即 `resolve` 方法被调用），`.then()` 方法会执行其回调函数；当状态变为失败时（即 `reject` 方法被调用），则会执行 `.catch()` 方法指定的回调函数。

`.then()` 方法可以接受两个参数，第一个是成功时的回调函数，第二个是失败时的回调函数（可选）。如果没有指定第二个回调函数，则在发生错误时会自动转到 `.catch()` 方法指定的回调函数。

例如，下面的代码演示了如何在 Vue.js 中使用 `.then()` 方法：

axios.get('/api/user/1')
  .then(function (response) {
    // 处理成功的响应
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理失败的响应
    console.log(error);
  });

在这个例子中，我们使用 Axios 库向后端发送请求。如果请求成功，`.then()` 方法会将响应的数据传递给回调函数，并将其打印到控制台中；如果请求失败，则会将错误信息传递给 `.catch()` 方法指定的回调函数。

需要注意的是，`.then()` 方法返回的是一个新的 Promise 对象，因此可以使用链式调用来处理多个异步操作：

axios.get('/api/user/1')
  .then(function (response) {
    // 处理第一个请求的响应
    console.log(response.data);
    // 发送第二个请求
    return axios.get('/api/user/2');
  })
  .then(function (response) {
    // 处理第二个请求的响应
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理失败的响应
    console.log(error);
  });

在这个例子中，我们在第一个请求成功后，使用 `.then()` 方法发送了第二个请求。如果第二个请求也成功，则会将响应的数据传递给第二个回调函数。如果任何一个请求失败，则会跳转到 `.catch()` 方法指定的回调函数。