当前位置：首页 > article >正文

Vue 3 30天精进之旅：Day 12 - 异步操作

article 2025/2/4 0:21:26

在现代前端开发中，异步操作是一个非常常见的需求，例如从后端API获取数据、进行文件上传等任务。Vue 3 结合组合式API和Vuex可以方便地处理这些异步操作。今天我们将重点学习如何在Vue应用中进行异步操作，包括以下几个主题：

异步操作概述
使用 fetch 进行API请求
结合Vuex处理异步请求
错误处理与状态管理
使用axios库进行更加高效的HTTP请求
总结与实践

1. 异步操作概述

异步操作允许程序在等待某些操作（如网络请求）完成时继续执行代码，而无需阻塞用户界面。这使得应用能够更流畅地运行，并提升用户体验。在Vue 3中，我们可以使用内置的 fetch API、axios库等来执行这些操作。在 Vuex 中，通常使用 actions 来处理异步请求，并通过 mutations 更新状态。

2. 使用 `fetch` 进行API请求

2.1. 示例代码

假设我们有一个应用需要从某个API获取用户信息。首先，我们可以使用原生 fetch API 来获取数据并展示。

vue

<template>
  <div>
    <h2>User Info</h2>
    <p v-if="error">{
  
  { error }}</p>
    <p v-if="loading">Loading...</p>
    <ul v-if="user">
      <li>Name: {
  
  { user.name }}</li>
      <li>Email: {
  
  { user.email }}</li>
    </ul>
    <button @click="fetchUser">Fetch User</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const user = ref(null);
    const error = ref(null);
    const loading = ref(false);

    const fetchUser = async () => {
      error.value = null; // 重置错误
      loading.value = true; // 开始加载
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        user.value = await response.json();
      } catch (err) {
        error.value = err.message; // 捕获并设置错误消息
      } finally {
        loading.value = false; // 结束加载
      }
    };

    return { user, error, loading, fetchUser };
  },
};
</script>

在这个组件中，我们定义了 fetchUser 方法来发送请求，使用 async 和 await 处理异步逻辑，并捕获可能出现的错误。

3. 结合Vuex处理异步请求

在Vuex中，我们使用actions来处理异步请求。以下是如何在Vuex中结合异步操作的示例：

3.1. 创建一个包含异步操作的Vuex Store

这里我们将创建一个用于获取用户信息的Vuex模块：

javascript

// store/user.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      user: null,
      loading: false,
      error: null,
    };
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setLoading(state, loading) {
      state.loading = loading;
    },
    setError(state, error) {
      state.error = error;
    },
  },
  actions: {
    async fetchUser({ commit }) {
      commit('setLoading', true);
      commit('setError', null);
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        if (!response.ok) {
          throw new Error('Failed to fetch user');
        }
        const user = await response.json();
        commit('setUser', user);
      } catch (error) {
        commit('setError', error.message);
      } finally {
        commit('setLoading', false);
      }
    },
  },
});

export default store;

3.2. 在组件中使用Vuex Store

接下来在我们的组件中调用这个Vuex action：

vue

<template>
  <div>
    <h2>User Info</h2>
    <p v-if="error">{
  
  { error }}</p>
    <p v-if="loading">Loading...</p>
    <ul v-if="user">
      <li>Name: {
  
  { user.name }}</li>
      <li>Email: {
  
  { user.email }}</li>
    </ul>
    <button @click="fetchUser">Fetch User</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { mapState, mapActions } from 'vuex';

export default {
  setup() {
    const { user, loading, error } = mapState(['user', 'loading', 'error']);

    return {
      user,
      loading,
      error,
      ...mapActions(['fetchUser']),
    };
  },
};
</script>

在这个示例中，我们使用Vuex定义的状态来管理数据，并在点击按钮事件中调用fetchUser action。

4. 错误处理与状态管理

无论是使用 fetch 还是 Vuex 中的异步操作，有效的错误处理非常重要。在上面的示例中，我们使用了 Vuex 的 mutations 来设置错误，而组件则根据状态展示相应的错误信息。

保持良好的用户体验，包括错误状态的展示，可以使用户更好地理解发生了什么。

5. 使用axios库进行更加高效的HTTP请求

虽然 fetch 是一种原生解决方案，但 axios 库为发送 HTTP 请求提供了许多便利的特性，以支持请求/响应拦截、取消请求、请求和响应的转化等。现在让我们使用 axios 来代替 fetch。

5.1. 安装axios

首先，我们需要安装 axios：

npm install axios

5.2. 使用axios发送请求

修改我们的Vuex Store，使用 axios 发起请求：

javascript

import axios from 'axios';

const store = createStore({
  state() {
    return {
      user: null,
      loading: false,
      error: null,
    };
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setLoading(state, loading) {
      state.loading = loading;
    },
    setError(state, error) {
      state.error = error;
    },
  },
  actions: {
    async fetchUser({ commit }) {
      commit('setLoading', true);
      commit('setError', null);
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users/1');
        commit('setUser', response.data);
      } catch (error) {
        commit('setError', error.response?.data?.message || error.message);
      } finally {
        commit('setLoading', false);
      }
    },
  },
});

在这个版本中，axios.get 方法发起请求，响应数据则从 response.data 中获取。错误处理也变得更加方便，因为 axios 对错误信息提供了更结构化的响应。