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 对错误信息提供了更结构化的响应。
6. 总结与实践
今天我们学习了异步操作的基本知识,并探讨了如何使用原生 fetch 和 axios 在 Vue 3 中处理异步请求。通过结合 Vuex,我们可以实现集中化的状态管理,使得复杂的应用变得更加可维护。
练习
- 使用
axios创建一个简单的天气信息应用,从一个开放的天气API获取天气数据,并用Vuex管理状态。 - 实现一个带有搜索功能的用户列表,当用户输入关键词时,从API获取相应用户列表并展示。
- 处理接收到的数据中出现的错误,例如 API 未响应、网络问题等,并用友好的提示展示给用户。
通过完成这些练习,你将能够深入理解Vue 3中的异步操作,并在实际应用中有效地进行状态管理。明天我们将探索更高级的主题,如Vue组件的样式和动画,敬请期待!
相关文章:
Vue 3 30天精进之旅:Day 12 - 异步操作
在现代前端开发中,异步操作是一个非常常见的需求,例如从后端API获取数据、进行文件上传等任务。Vue 3 结合组合式API和Vuex可以方便地处理这些异步操作。今天我们将重点学习如何在Vue应用中进行异步操作,包括以下几个主题: 异步操…...
【网络】3.HTTP(讲解HTTP协议和写HTTP服务)
目录 1 认识URL1.1 URI的格式 2 HTTP协议2.1 请求报文2.2 响应报文 3 模拟HTTP3.1 Socket.hpp3.2 HttpServer.hpp3.2.1 start()3.2.2 ThreadRun()3.2.3 HandlerHttp() 总结 1 认识URL 什么是URI? URI 是 Uniform Resource Identifier的缩写&…...
[paddle] 矩阵相关的指标
行列式 det 行列式定义参考 d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1,i2,⋯,in…...
docker部署SpringBoot项目简单流程
一、docker基础命令理解学习 1、常见命令 docker启动之前要关闭防火墙systemctl stop firewalld # 关闭防火墙systemctl disable firewalld # 禁止开机启动防火墙systemctl start docker # 启动docker服务systemctl stop docker # 停止docker服务systemctl restart docker # …...
Python学习——函数参数详解
Python中的函数参数传递机制允许多种灵活的参数类型,可以根据需求灵活配置参数,这使得函数具有更强大的扩展性和适应性。以下是对各类参数类型的详细说明: 1. 定义函数的不同参数类型 1.1 位置参数 定义方式:def func(a, b2) 特…...
Chromium132 编译指南 - Android 篇(一):编译前准备
1. 引言 欢迎来到《Chromium 132 编译指南 - Android 篇》系列的第一部分。本系列指南将引导您逐步完成在 Android 平台上编译 Chromium 132 版本的全过程。Chromium 作为一款由 Google 主导开发的开源浏览器引擎,为众多现代浏览器提供了核心驱动力。而 Android 作…...
.Net / C# 繁体中文 与 简体中文 互相转换, 支持地方特色词汇
版本号 Nuget 搜索 “OpenCCNET”, 注意别找错, 好多库的名字都差不多 支持 “繁,简” 的互相转换, 支持多个地区常用词汇的转换, 还支持 日文的新旧转换. OpenCC 在 .Net 中的实现 https://github.com/CosineG/OpenCC.NET <PackageReference Include"OpenCCNET"…...
Java泛型深度解析(JDK23)
第一章 泛型革命 1.1 类型安全的进化史 前泛型时代的类型转换隐患 代码的血泪史(Java 1.4版示例): List rawList new ArrayList(); rawList.add("Java"); rawList.add(Integer.valueOf(42)); // 编译通过// 灾难在运行时爆发…...
【贪心算法篇】:“贪心”之旅--算法练习题中的智慧与策略(一)
✨感谢您阅读本篇文章,文章内容是个人学习笔记的整理,如果哪里有误的话还请您指正噢✨ ✨ 个人主页:余辉zmh–CSDN博客 ✨ 文章所属专栏:贪心算法篇–CSDN博客 文章目录 一.贪心算法1.什么是贪心算法2.贪心算法的特点 二.例题1.柠…...
AJAX XML
AJAX XML 引言 随着互联网技术的不断发展,Web应用对用户交互性和实时性的要求越来越高。AJAX(Asynchronous JavaScript and XML)技术的出现,为Web应用开发提供了强大的支持。AJAX技术允许Web应用在不重新加载整个页面的情况下,与服务器进行异步通信。XML作为数据传输格式…...
踏入编程世界的第一个博客
我,一个双非一本大一新生,普通的不能再普通了,面对宏伟庞大的计算机世界仍显得举手无措,我自以为自身仍有些许骨气,不想普普通通,甚是浑浑噩噩的度过四年大学,经历了高考的打击,双非…...
2025年1月22日(网络编程 udp)
系统信息: ubuntu 16.04LTS Raspberry Pi Zero 2W 系统版本: 2024-10-22-raspios-bullseye-armhf Python 版本:Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习…...
数据结构与算法之栈: LeetCode 641. 设计循环双端队列 (Ts版)
设计循环双端队列 https://leetcode.cn/problems/design-circular-deque/description/ 描述 设计实现双端队列。 实现 MyCircularDeque 类: MyCircularDeque(int k) :构造函数,双端队列最大为 k 。boolean insertFront():将一个元素添加到双端队列头部…...
从零开始学 HTML:构建网页的基本框架与技巧
系列文章目录 01-从零开始学 HTML:构建网页的基本框架与技巧 文章目录 系列文章目录前言一、HTML 文档的基本框架1.1 <!DOCTYPE html>、<html>、<head>、<body> 标签解析1.1.1 <!DOCTYPE html> 标签1.1.2 <html> 标签1.1.3 &l…...
一些杂记2
1.#define 1.1定义 #define 是一个预处理指令,用于定义宏 宏,是预处理阶段(在编译之前)由预处理器处理的代码片段 1.2使用 1.2.1 #define 可以定义常量 #define PI 3.14159 1.2.2 #define 可以定义宏函数 #define SQUARE(x) ((…...
C语言 --- 分支
C语言 --- 分支 语句分支语句含义if...else语句单分支if语句语法形式 双分支 if-else 语句语法形式 悬空else含义问题描述 多分支 if-else 语句语法形式 switch...case语句含义语法形式 总结 💻作者简介:曾与你一样迷茫,现以经验助你入门 C 语…...
【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.10 ndarray内存模型:从指针到缓存优化
2.10 ndarray内存模型:从指针到缓存优化 目录 #mermaid-svg-p0zxLYqAnn59O2Xe {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-p0zxLYqAnn59O2Xe .error-icon{fill:#552222;}#mermaid-svg-p0zxLYqAnn59O…...
【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.6 广播机制核心算法:维度扩展的数学建模
2.6 广播机制核心算法:维度扩展的数学建模 目录/提纲 #mermaid-svg-IfELXmhcsdH1tW69 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IfELXmhcsdH1tW69 .error-icon{fill:#552222;}#mermaid-svg-IfELXm…...
K8S极简教程(4小时快速学会)
1. K8S 概览 1.1 K8S 是什么 K8S官网文档:https://kubernetes.io/zh/docs/home/ 1.2 K8S核心特性 服务发现与负载均衡:无需修改你的应用程序即可使用陌生的服务发现机制。存储编排:自动挂载所选存储系统,包括本地存储。Secret和…...
系统URL整合系列视频二(界面原型)
视频 系统URL整合系列视频二(界面原型) 视频介绍 (全国)大型分布式系统Web资源URL整合需求界面原型讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格,控制粒度也越来越细。安全级别提高的同时也增加…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
6.9本日总结
一、英语 复习默写list11list18,订正07年第3篇阅读 二、数学 学习线代第一讲,写15讲课后题 三、408 学习计组第二章,写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语:复习l默写sit12list17&#…...
标注工具核心架构分析——主窗口的图像显示
🏗️ 标注工具核心架构分析 📋 系统概述 主要有两个核心类,采用经典的 Scene-View 架构模式: 🎯 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 🔧 关键函数&…...
【免杀】C2免杀技术(十五)shellcode混淆uuid/ipv6/mac
针对 shellcode 混淆(Shellcode Obfuscation) 的实战手段还有很多,如下表所示: 类型举例目的编码 / 加密XOR、AES、RC4、Base64、Poly1305、UUID、IP/MAC改变字节特征,避开静态签名或 YARA结构伪装PE Stub、GIF/PNG 嵌入、RTF OLE、UUID、IP/MAC看起来像合法文件/数据,弱…...
【版本控制】Git 和 GitHub 入门教程
目录 0 引言1 Git与GitHub的诞生1.1 Git:Linus的“两周奇迹”,拯救Linux内核1.2 GitHub:为Git插上协作的翅膀1.3 协同进化:从工具到生态的质变1.4 关键历程时间轴(2005–2008) 2 Git与GitHub入门指南2.1 Gi…...
