vue2【axios请求】

news2025/1/18 5:54:46

1:axios作用

axios(发音:艾克c奥斯)是前端圈最火的,专注于数据请求的库。

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中axios的github:https://github.com/axios/axios

中文官网地址:http://www.axios-js.com/

英文官网地址:https://www.npmjs.com/package/axios

1.1:引入axios

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2:axios的基础语法

2.1:发起get请求示例

get请求传参的两种方式

第一种拼接路径上面,第二种将参数写在params内

//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(function(response){
        console.log(response);
    }).catch(function(err){
    console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
            params:{
                ID:12345
               }
    }).then(function(response){
        console.log(response);
    }).catch(function(err){
    console.log(err);
});

2.2:发起post请求示例

post请求的示例:

axios.post('/user',
        {
            firstName:'Fred',
            lastName:'Flintstone'
        }
      ).then(function(res){
        console.log(res);
    }).catch(function(err){
        console.log(err);
});

3:为什么使用async和await

调用axios方法得到的返回值是Promise对象

注意:如果调用某个方法的返回值是Promise实例,则前面可以添加await!

因为await只能用在被async"修饰"方法中,所有使用await需要带async,成对出现

示例:

3.1:结构响应的属性

通过{对象里面的属性名} 解构出想要的属性 

3.2:对结构的属性重命名

通过:的方式对属性进行重命名

4:基于axios.get()和axios.post()发送请求

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ESP32网络开发实例-非接触式水位监测

非接触式水位监测 文章目录 非接触式水位监测1、HC-SR04介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将使用 HC-SR04 超声波传感器和 ESP32 创建一个水位监测网络服务器。 这将是一个非接触式水位测量系统。 首先,我们将介绍HC-SR04 与 ESP32 连接。 使用ESP32对超声…

如何去掉图片上的水印?这三种去水印的方法帮你解决!

当我们从网上看到喜欢的图片&#xff0c;想要保存下来作为头像或者插入到工作汇报中时&#xff0c;却发现下载的图片带有水印。这不仅影响了图片的美观&#xff0c;还可能对图片的可用性造成影响。那么&#xff0c;如何去掉图片上的水印呢? 实际上&#xff0c;现在市面上的很多…

【数据结构】10道经典面试题目带你玩转链表

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 一.移除链表元素 二.反转链表 三.链表的中间结点 四.链表中倒数第K个结点 五.合并两个有序链表 六.链表分割 七.链表的回文结构 八.相交链表 九.环形链表 一.移…

[Vue3] pinia状态管理

文章目录 1.pinia的介绍2.pinia的配置3.state状态管理3.1 state的基本使用3.2 state的访问 4.getters 1.pinia的介绍 Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话&#xff0c;你可能会认为可以通过一行简单的 export …

梦想编织者——Adobe Dreamweaver

今天&#xff0c;我们来谈谈一款在Adobe系列中推出的一款Adobe Dreamweaver&#xff0c;简称“DW”&#xff0c;中文名称 “梦想编织者”&#xff0c;是集网页制作和管理网站于一身的所见即所得网页代码编辑器。 利用对 HTML、CSS、JavaScript等内容的支持&#xff0c;设计人员…

QGIS003:【05高级数字化工具栏】-要素移动、修改、合并操作

摘要&#xff1a;QGIS地图导航工具栏包括激活高级数字化工具、移动要素、旋转要素、缩放要素、简化要素、添加环、添加部件、填充环、删除环、删除部件、重塑要素、偏移曲线、反转线、裁剪/扩展要素、分割要素、分割部件、合并所选要素、合并所选要素的属性、旋转点符号等选项&…

配电房智能监控系统

配电房智能监控系统是一种集成了互联网、物联网、大数据、人工智能等技术的系统&#xff0c;专门用于对配电房进行全方位、实时的监控和管理。主要是在高压柜、变压器及低压柜智能化的基础上&#xff0c;通过分布在配电室内的各类传感器、采集与通信设备&#xff0c;将各种设备…

【产品应用】一体化伺服电机在系留无人机中的应用

一体化伺服电机是一种将电机、驱动器、编码器结合在一起的伺服系统&#xff0c;具有高精度控制、快速响应和高效运行等优点。系留无人机则是一种通过绳索或链条与地面设施连接的无人机&#xff0c;能够实现长时间的稳定悬停和空中作业。 01.设备简介 电源线牵引装置&#xff1…

人工智能发展前景

随着人工智能的快速发展&#xff0c;这个行业对人才的需求也在不断增长。越来越多的有志之士开始关注人工智能&#xff0c;希望通过自学获得相关技能&#xff0c;进而在人工智能领域找到心仪的职业。本文将探讨人工智能职业发展的前景&#xff0c;并为大家提供自学人工智能的途…

紫色调城市和奔跑人物剪影背景工会工作总结汇报PPT模板

这是一套紫色调城市和奔跑人物剪影背景工会工作总结汇报PPT模板&#xff0c;共33页&#xff1b; PPT模板封面&#xff0c;使用了蓝天白云、城市剪影、奔跑人物剪影背景图片。中间填写工会工作总结汇报PPT标题。界面色彩丰富充满活力。 PowerPoint模板内容页&#xff0c;由31张…

FDM(傅里叶分解)

代码的使用教程 傅里叶分解&#xff08;FDM&#xff09; 代码原理 FDM (Frequency Division Multiplexing)是一种调制技术&#xff0c;将信号分成多个不同的频带进行传输&#xff0c;从而实现多路复用的通信方式。FDM分解原理是将不同频率的信号分解成不同的频带&#xff08;子…

【Linux】基本指令

Linux现在已经是绕不开的操作系统&#xff0c;其开源导致的稳定性&#xff0c;安全性等方面遥遥领先。今天我们开始学习Linux操作系统的基本指令 ls 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于…

极光笔记 | EngageLab Push的多数据中心接入指南

01背景 作为一个面向全球的消息推送服务平台&#xff0c;我们一直致力于给全球用户提供安全、可靠、高效的消息推送服务&#xff0c;因此我们意识到在不同洲建立数据中心的重要性。这样做将有助于提高我们的服务可用性、降低延迟并保护用户数据的安全性。 第一&#xff0c;通过…

Kubernetes1.28.X 集群安装

1、环境准备 准备2台虚拟机&#xff0c;安装集群一律使用内网ip通信&#xff0c;相关配置文件一律配置内网ip。 ip别名用途192.168.0.193kubernetes-master.openlab.cn主节点&#xff0c;harbor仓库192.168.0.194kubernetes-work.openlab.cnwork节点 hostnamectl set-hostna…

git diff相关命令

git diff相关命令 git diff git diff此命令比较的是工作目录中当前文件和暂存区中的文件差异&#xff0c;也就是修改之后还没有暂存起来的变化内容。因为后续要将工作目录中的文件添加到暂存区。 示例&#xff1a; 当前工作目录下有一个2.txt的文件&#xff0c;文件的内容是…

Vue 路由缓存 防止路由切换数据丢失 路由的生命周期

在切换路由的时候&#xff0c;如果写好了一丢数据在去切换路由在回到写好的数据的路由去将会丢失&#xff0c;这时可以使用路由缓存技术进行保存&#xff0c;这样两个界面来回换数据也不会丢失 在 < router-view >展示的内容都不会被销毁&#xff0c;路由来回切换数据也…

《轻购优品》新零售玩法:消费积分认购+众筹新玩法

《轻购优品》新零售玩法&#xff1a;消费积分认购众筹新玩法 引言&#xff1a;2023年开年已来&#xff0c;政府的工作报告提出“把恢复和扩大消费摆在优先位置”&#xff0c;并且把2023年定位为“消费提振年”&#xff0c;以“全年乐享全年盛惠”为主题多地政府共同发力&#x…

LLM大模型4位量化实战【GPTQ】

权重量化方面的最新进展使我们能够在消费类硬件上运行大量大型语言模型&#xff0c;例如 RTX 3090 GPU 上的 LLaMA-30B 模型。 这要归功于性能下降最小的新型 4 位量化技术&#xff0c;例如 GPTQ、GGML 和 NF4。 在上一篇文章中&#xff0c;我们介绍了简单的 8 位量化技术和出…

2020年06月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 如下图所示脚本运行的结果是()? A:画一条直线 B:画一个三角形 C:画一个圆形 D:画一条虚线 答案:D 第2题 运行如下图所示脚本,下面选项中说法错误的是? A:“笔的颜色”…

计算机网络秋招面试题

自己在秋招过程中遇到的计算机网络的面试题 OSI七层网络模型 DNS&#xff1a;应用层协议 根据域名查IP地址 DNS查询⽅式有哪些&#xff1f; 递归解析 局部DNS服务器⾃⼰负责向其他DNS服务器进⾏查询&#xff0c;⼀般是先向该域名的根域服务器查询&#xff0c;再由根域名服…