Vue 使用异步编程：Promise / Async/Await

最新推荐文章于 2026-06-10 09:40:17 发布

原创最新推荐文章于 2026-06-10 09:40:17 发布 · 2.3k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

vue.js

javascript

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

二、使用 Async/Await 进行异步操作

在 Vue 开发中，异步编程是处理诸如网络请求、文件读取等耗时操作的常用手段。Promise 和 Async/Await 是 JavaScript 中强大的异步编程工具，在 Vue 项目里合理运用它们能有效提升代码的可读性与可维护性。下面将详细介绍在 Vue 中如何使用 Promise 和 Async/Await。

一、使用 Promise 进行异步操作

1. 场景介绍

假设我们要在 Vue 组件里发送一个异步的 HTTP 请求来获取数据。为了模拟这个请求，我们可以使用 setTimeout 函数来模拟延迟响应。

2. 代码示例

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="loading">加载中...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      loading: false,
      error: null
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.error = null;
      this.data = null;

      // 创建一个 Promise
      const promise = new Promise((resolve, reject) => {
        // 模拟异步请求
        setTimeout(() => {
          const success = Math.random() > 0.5;
          if (success) {
            resolve('这是从服务器获取的数据');
          } else {
            reject(new Error('请求失败'));
          }
        }, 1000);
      });

      // 处理 Promise
      promise
        .then((response) => {
          this.data = response;
        })
        .catch((error) => {
          this.error = error.message;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

3. 代码解释

在 fetchData 方法中，首先将 loading 状态设为 true，表示开始加载数据。
创建一个 Promise 对象，在 setTimeout 中模拟异步请求。如果随机数大于 0.5，则请求成功，调用 resolve 方法；否则请求失败，调用 reject 方法。
使用 then 方法处理成功的响应，将响应数据赋值给 data。
使用 catch 方法处理失败的响应，将错误信息赋值给 error。
使用 finally 方法，无论请求成功还是失败，都将 loading 状态设为 false。

二、使用 Async/Await 进行异步操作

1. 场景介绍

Async/Await 是基于 Promise 的语法糖，它能让异步代码看起来更像同步代码，提高代码的可读性。我们继续使用上面的异步请求场景。

2. 代码示例

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="loading">加载中...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      loading: false,
      error: null
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.error = null;
      this.data = null;

      try {
        // 模拟异步请求的函数
        const response = await this.getAsyncData();
        this.data = response;
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
    getAsyncData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const success = Math.random() > 0.5;
          if (success) {
            resolve('这是从服务器获取的数据');
          } else {
            reject(new Error('请求失败'));
          }
        }, 1000);
      });
    }
  }
};
</script>

3. 代码解释

fetchData 方法被定义为 async 函数，这意味着它返回一个 Promise。
在 try 块中，使用 await 关键字等待 getAsyncData 函数返回的 Promise 解决。如果 Promise 成功解决，将响应数据赋值给 data。
如果 Promise 被拒绝，catch 块会捕获错误，并将错误信息赋值给 error。
无论请求成功还是失败，finally 块都会将 loading 状态设为 false。

结语

Promise：是 JavaScript 中处理异步操作的基础，通过 then、catch 和 finally 方法可以方便地处理异步操作的结果。
Async/Await：是基于 Promise 的语法糖，能让异步代码更像同步代码，提高代码的可读性和可维护性。在 Vue 组件中，Async/Await 通常用于处理复杂的异步逻辑。

在实际开发中，我们可以根据具体场景选择合适的异步编程方式。同时，结合 Vue 的生命周期钩子和事件处理，能够更好地管理异步操作的状态和结果。