从0开始Vue3数据交互之promise详解

精选原创

牛掰666 2024-09-30 13:27:27 ©著作权

©著作权归作者所有：来自51CTO博客作者牛掰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 Vue 3 中，Promise 是处理异步操作的一种重要方式。Promise 对象代表了一个最终会在未来完成（或失败）的异步操作及其结果。Promise 的主要优点在于它提供了一种链式调用的方式，使得异步代码更加简洁易读，并且可以很好地处理错误。

Promise 基础

创建 Promise

一个 Promise 对象是一个构造函数的结果，这个构造函数接受一个执行器函数作为参数。执行器函数立即执行，并接收两个参数：resolve 和 reject，这两个参数是函数，用于改变 Promise 的状态。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 成功的情况
    resolve('Success!');
  }, 1000);
});

处理成功和失败

使用 .then 方法来处理成功的情况，.catch 方法来处理失败的情况。.then 方法接受一个回调函数，这个函数会在 Promise 被 resolve 之后执行。.catch 方法也接受一个回调函数，这个函数会在 Promise 被 reject 之后执行。

promise
  .then(result => {
    console.log(result); // 输出 "Success!"
  })
  .catch(error => {
    console.error(error);
  });

链式调用

Promise 的另一个强大之处在于它可以被链式调用。这意味着你可以在一个 .then 方法后面紧接着调用另一个 .then 方法，并且第二个 .then 的回调函数将会接收到前一个 .then 返回的结果。

promise
  .then(result => {
    console.log(result); // 输出 "Success!"
    return 'Another Success!';
  })
  .then(anotherResult => {
    console.log(anotherResult); // 输出 "Another Success!"
  });

处理多个 Promise

有时候你可能需要同时处理多个 Promise。Promise.all 和 Promise.race 可以帮助你做到这一点。

Promise.all 接受一个 Promise 数组作为参数，并且只有当所有的 Promise 都成功时才会返回一个成功的数组。
Promise.race 接受一个 Promise 数组作为参数，并且返回第一个完成（无论是成功还是失败）的 Promise 的结果。

const promise1 = Promise.resolve('Success 1');
const promise2 = Promise.resolve('Success 2');
const promise3 = Promise.reject('Error');

Promise.all([promise1, promise2])
  .then(values => {
    console.log(values); // 输出 ["Success 1", "Success 2"]
  })
  .catch(error => {
    console.error(error); // 如果任何一个 Promise 失败，这里会捕获错误
  });

Promise.race([promise1, promise2, promise3])
  .then(value => {
    console.log(value); // 输出 "Success 1"
  })
  .catch(error => {
    console.error(error); // 输出 "Error"
  });

Vue 3 中使用 Promise

在 Vue 3 中，你可以使用 Promise 来处理组件内的异步操作，例如在 mounted 生命周期钩子中发起 AJAX 请求，或者在 setup 函数中处理异步数据。

示例：使用 Axios 发起请求

假设你正在使用 Axios 来发起一个 GET 请求：

import { onMounted, ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    });

    return {
      data
    };
  }
}

在这个例子中，我们使用 onMounted 生命周期钩子来确保 DOM 已经挂载完毕后再发起请求。await 关键字用于等待 Promise 解析完成后继续执行后面的代码。如果请求失败，我们会捕获错误并在控制台输出错误信息。