Vue3学习使用axios和qs进行POST请求和响应处理

news/2024/7/14 18:15:53/文章来源:https://blog.csdn.net/weixin_46146718/article/details/139238822

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 一、前言
    • 1.准备工作
    • 2.发送POST请求
    • 3.处理响应数据
    • 4.总结


一、前言

在前端开发中,经常需要与后端进行数据交互,其中包括发送POST请求并处理响应数据。本文将介绍如何使用Vue 3、axios和qs库来发送POST请求,并对响应数据进行处理。
专门处理此类型后端post请求接收方式
在这里插入图片描述

1.准备工作

首先,确保你的项目中已经安装了Vue 3、axios和qs库。如果没有安装,你可以使用以下命令进行安装:

# 安装Vue 3
npm install vue@next# 安装axios
npm install axios# 安装qs
npm install qs

2.发送POST请求

在Vue 3中,我们可以使用<script setup>语法来编写组件。下面是一个示例,展示了如何使用axios发送POST请求:

<script setup>
import axios from 'axios';
import qs from 'qs';
import { ElMessage } from 'element-plus';const deleteItem = async (item) => {try {const response = await axios.post("/xxxxxx/xxxxxxx/deleteById",qs.stringify({id: item.row.id}));const data = response.data;if (data.code === 0) {ElMessage.success("删除成功");} else {ElMessage.error(data.message);}} catch (error) {console.error("Error occurred:", error);ElMessage.error("删除失败");}
};
</script>

在上述代码中,我们定义了一个名为 deleteItem 的异步函数,用于发送POST请求。在函数内部,我们使用axios.post方法发送POST请求,并使用qs.stringify方法将包含 id 字段的对象转换为适合作为请求数据的格式。接着,我们使用try...catch块来处理请求过程中可能发生的异常。

3.处理响应数据

当请求成功时,我们从响应中获取数据,并根据其中的code字段判断操作是否成功,然后使用ElMessage来显示相应的消息。如果请求失败,我们也在catch块中处理了异常情况,并使用ElMessage来提示用户删除失败的消息。

4.总结

通过本文的学习,你学会了如何使用Vue 3、axios和qs库来发送POST请求,并对响应数据进行处理。这些技能对于与后端进行数据交互非常重要,希望本文对你有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1053633.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目十二:简单的python基础爬虫训练

许久未见&#xff0c;甚是想念&#xff0c;今日好运&#xff0c;为你带好运。ok&#xff0c;废话不多说&#xff0c;希望这门案例能带你直接快速了解并运用。&#x1f381;&#x1f496; 基础流程 第一步&#xff1a;安装需要用到的requests库&#xff0c;命令如下 pip inst…

民国漫画杂志《时代漫画》第29期.PDF

时代漫画29.PDF: https://url03.ctfile.com/f/1779803-1248635405-bf3c87?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

动态内存管理—C语言通讯录

目录 一&#xff0c;动态内存函数的介绍 1.1 malloc和free 1.2 calloc 1.3 realloc 1.4C/C程序的内存开辟 二&#xff0c;通讯录管理系统 动态内存函数的介绍 malloc free calloc realloc 一&#xff0c;动态内存函数的介绍 1.1 malloc和free void* malloc (…

栈的特性及代码实现(C语言)

目录 栈的定义 栈的结构选取 链式储存结构和顺序栈储存结构的差异 栈的代码实现 "stack.h" "stack.c" 总结 栈的定义 栈&#xff1a;栈是限定仅在表尾进行插入和删除操作的线性表。 我们把运行插入的和删除的一段叫做栈顶&#xff08;TOP&#xff…

uview1.0 u-form表单回显校验不通过

提交到后端的数据&#xff0c;回显后不做任何修改无法通过表单校验 原因&#xff0c;u-form表单校验的类型默认为string&#xff0c;但是后端返回的是integer类型&#xff0c;导致无法通过校验 解决&#xff0c;既然后端返回的是整数形&#xff0c;那么我们就将校验规则的type…

0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

大纲 序列化反序列化完整TypeHandlerSQL XML完整XML Mapper测试代码代码 在《0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKT方案》中&#xff0c;我们介绍WTK方案的优点&#xff0c;也感受到它的繁琐和缺陷。比如&#xff1a; 需要借助ST_GeomFromText…

如何创建 Gala Games 账户:解决 Cloudflare 验证指南 2024

Gala Games 站在数字娱乐新时代的前沿&#xff0c;将区块链技术与游戏相结合&#xff0c;重新定义了所有权和奖励。本文将引导您创建 Gala Games 账户并使用 CapSolver 解决 Cloudflare 验证难题&#xff0c;确保您顺利进入这一创新的生态系统。 什么是 Gala Games&#xff1f…

Dockerfile使用

1.Dockerfile是什么 官网地址 https://docs.docker.com/reference/dockerfile/概念 是什么 Dockerfile 是用于构建 Docker 镜像的文本文件&#xff0c;它包含一系列的指令&#xff08;instructions&#xff09;和参数&#xff0c;用于描述如何构建和配置镜像。 Dockerfile 是…

在树莓派3B+中下载opencv(遇到的各种问题及解决)

目录 前言 1、删除原版本下新版本 2、python虚拟环境 3、python版本共存换链接——给版本降低 4、烧录之前版本的文件&#xff08;在清华源中可以找&#xff0c;不用官网的烧录文件就行&#xff1b; 比如&#xff1a;&#xff08;balenaEtcher&#xff09;重新烧录有问题…

利用迭代方法求解线性方程组(Matlab)

一、问题描述 利用迭代方法求解线性方程组。 二、实验目的 掌握Jacobi 方法和Gauss-Seidel 方法的原理&#xff0c;能够编写代码实现两种迭代方法&#xff1b;能够利用代码分析线性方程组求解中的误差情况。 三、实验内容及要求 用代码实现&#xff1a;对下列方程中重新组织…

多商户消费券系统源码(ThinkPHP+FastAdmin+微信公众号)

打造智能促销新体验 一、引言&#xff1a;消费券系统的时代意义 在当今这个数字化高速发展的时代&#xff0c;电子商务和移动支付已经成为人们日常生活的重要组成部分。随着市场竞争的加剧&#xff0c;多商户消费券系统作为一种创新的促销手段&#xff0c;正逐渐受到商家和消…

IP协议说明

文章目录 前言一、IP协议的简介二、IP数据报1.IP 数据报结构2.IP 数据报的分片解析3.IP 数据报的分片重装 三、IP 数据报的输出四、IP 数据报的输入 前言 IP 指网际互连协议&#xff0c; Internet Protocol 的缩写&#xff0c;是 TCP/IP 体系中的网络层协议。设计 IP 的目的是…

mysql中text,longtext,mediumtext区别

文章目录 一.概览二、字节限制不同三、I/O 不同四、行迁移不同 一.概览 在 MySQL 中&#xff0c;text、mediumtext 和 longtext 都是用来存储大量文本数据的数据类型。 TEXT&#xff1a;TEXT 数据类型可以用来存储最大长度为 65,535(2^16-1)个字符的文本数据。如果存储的数据…

生成式AI的GPU网络技术架构

生成式AI的GPU网络 引言&#xff1a;超大规模企业竞相部署拥有64K GPU的大型集群&#xff0c;以支撑各种生成式AI训练需求。尽管庞大Transformer模型与数据集需数千GPU&#xff0c;但实现GPU间任意非阻塞连接或显冗余。如何高效利用资源&#xff0c;成为业界关注焦点。 张量并…

SpringCloud系列(22)--Ribbon默认负载轮询算法原理及源码解析

前言&#xff1a;在上一篇文章中我们介绍了如何去切换Ribbon的负载均衡模式&#xff0c;而本章节内容则是介绍Ribbon默认负载轮询算法的原理。 1、负载轮询算法公式 rest接口第N次请求数 % 服务器集群总数 实际调用服务器下标&#xff08;每次服务器重启后rest接口计数从1开始…

K210 数字识别 笔记

一、烧写固件 连接k210开发板&#xff0c;点开烧录固件工具&#xff0c;选中固件&#xff0c;并下载 二、模型训练 网站&#xff1a;MaixHub 1、上传文件 2、开始标记数据 添加9个标签&#xff0c;命名为1~9&#xff0c;按键盘w开始标记&#xff0c;键盘D可以下一张图片&…

C语⾔:内存函数

1. memcpy使⽤和模拟实现&#xff08;对内存块的复制&#xff0c;不在乎类型&#xff09; void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇…

【LabVIEW FPGA入门】同步C系列模块

1.同步使用循环定时器VI计时循环速率的系列模块 数字模块SAR ADC 模块多路复用模块 数字通道可以在一个时钟周期内执行。模拟通道需要多个时钟周期。 同步模拟模块的每个通道有一个 ADC&#xff0c;采集的数据在通道之间没有明显的偏差。多路复用模块使用多路复用器通过单个 A…

[杂项]优化AMD显卡对DX9游戏(天谕)的支持

目录 关键词平台说明背景RDNA 1、2、3 架构的显卡支持游戏一、 优化方法1.1 下载 二、 举个栗子&#xff08;以《天谕》为例&#xff09;2.1 下载微星 afterburner 软件 查看游戏内信息&#xff08;可跳过&#xff09;2.2 查看D3D9 帧数2.3 关闭游戏&#xff0c;替换 dll 文件2…

PHP开发入门

PHP官网&#xff1a;PHP: Hypertext Preprocessor apache官网&#xff1a;https://httpd.apache.org/ 一、搭建PHP环境 下载apache 进入官网点击download 选择下载windows版本文件 点击进入下载界面 点击下载64位版本文件 下载后解压文件 解压文件后进入 D:\httpd-2.4.59-24…