Vue 3 30天精进之旅：Day 12

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

在现代前端开发中，异步操作是一个非常常见的需求，例如从后端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 对错误信息提供了更结构化的响应。