【Vue】使用 axios 发送ajax 请求

news2025/1/15 22:08:41

在 Vue 里面我们如何去发送一些 Ajax(阿贾克斯)请求 从远程的网站上获取一些数据。

假如我们有这样的接口的地址:
https://www.xxxx.site

假设它是一个能跨域访问的接口。‍‍‍‍

如果我们想去在我们的代码里面发这种请求,我该怎么做?

首先我们要安装一个‍‍能够发请求的工具,在控制台里面运行一下npm install‍‍:

当你安装完了之后,我们就可以来写我们的代码了,
我先启动服务器:

我们可以先来写一下我们的代码,想发一个请求。
首先在About页面我们去引入 axios,‍‍
如果我想发一个请求,我怎么发?

在setup函数里面,我们可以在顶部去写一下‍‍axios点get,【类比Python中的requests.get】

然后我们写一下发送到哪个接口,发送到这个接口:
https://www.xxxx.site

然后我们写一个点then,
然后我们会获取到接口发送回来的结果,

比如说response,我console点log一下‍‍,

保存,回到我的页面上,打开控制台,在About这个页面我们刷一下,‍‍大家可以看到它会把请求返回的内容打印出来:

它返回的结果是什么?
说有error,‍‍它返回的内容是一个error,我们看一下我的请求是不是这样的?‍‍

它会发一个‍‍ register这样的请求,请求的返回结果就是这样的一个内容,

我们可以用一下里面的message,‍‍怎么用?

我们这样用:

它会把 message 打印出来:

在 Vue 里面如何发一个请求?直接使用 axios 来发送就行了。‍‍

我可以通过 axios 这个工具去便捷的向某些接口发送接口请求,然后获取完数据后进行页面的展示。‍‍

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

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

相关文章

Ubuntu 桌面系统升级

本文介绍 Ubuntu 桌面系统升级的两种方式,通过 UI 或命令行的方式,演示为 20.04 升级为 22.04。并介绍了 windows 的 Linux 子系统 wsl 的升级注意事项。 背景 之前在学习 ROS2 时,安装 ros-humble-desktop 出现依赖错误:无法修正…

[附源码]java毕业设计食材采购平台论文

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

AI智工作室11.19练习题解

F CodeForces - 710A 训练1(共12题) - Virtual Judge 我的代码 #include<iostream> using namespace std; int main() {char arr[10][10],a;int b,c,k0;cin>>a>>c; ba-a1; // cout<<b<<" "<<c<<endl; for(int i0;i<9…

使用VSCode编辑与编译WSL2下源代码

1. 安装WSL2 2. windows下安装VSCode 3. VSCode安装插件Remote Development 北京时间2019年5月3日&#xff0c;在 PyCon 2019 大会上&#xff0c;微软发布了 VS Code Remote&#xff0c;开启了远程开发的新时代&#xff01;这次发布包含了三款核心的全新插件&#xff0c;它们…

Java文件操作【教你用Java运行微信】

文章目录01 创建文件02 获取文件信息03 目录操作和文件删除04 运行可执行文件01 创建文件 new File(String pathname) //根据路径创建一个File对象&#xff1b;new File(File parent,String child) //根据父目录文件子路径创建&#xff1b;new File(String parent,String chil…

使用mqtt.fx向EMQX服务器发送消息

摘要&#xff1a;本文介绍如何使用mqtt.fx向mqtt服务器&#xff08;EMQX&#xff09;发送消息。顺便介绍一下labview与EMQX连接成功的实现效果。 上一篇文章介绍了如何在ubuntu下安装emqx服务器&#xff0c;以及如何使用mqtt.fx订阅服务器上的一个主题。 ubuntu系统下搭建本地…

为什么ArcGIS添加的TIFF栅格数据是一片纯色

下面来介绍一下今天的正式内容&#xff1a;为什么你添加的tiff栅格数据明明有数据&#xff0c;为什么却在GIS中显示一片颜色。 即使你去拉伸后 他还是显示这样&#xff1f; 那如何才能让他正常显示呢&#xff1f; 逻辑其实是简单的。我们检查数据会发现&#xff0c;这份数据等…

Springboot集成HBase使用案例

一、HBase部署安装 1.HBase下载地址:Apache HBase – Apache HBase Downloads 2.解压启动(进入压缩包bin目录),本次演示的是macOS系统启动演示(windows系统启动命令:./start-hbase.cmd) ./start-hbase.sh 3. 浏览器访问http://IP:16010/master-status出现如下页面表示启动成功…

线程基础知识复习

线程基础知识复习 并发相关Java包 涉及到的包内容 java.util.concurrentjava.util.concurrent.atomicjava.util.concurrent.locks 并发始祖 并发始祖Doug Lea start线程解读 初始程序 public static void main(String[] args) {Thread t1 new Thread(() ->{},"t…

涛涛的Linux学习笔记

前言&#xff1a; 因为自己偏向Java后端开发&#xff0c;接触linux有一段时间了&#xff0c;但从来没系统的学过&#xff0c;用啥学啥&#xff0c;所以一直感觉体系不全&#xff0c;现在补补日常能用到的。 一、Linux的定位 二、Linux系统的目录结构 目录结构描述/根目录&#…

【云原生】Docker的初步认识,安装与基本操作

内容预知 1.docker的相关知识 1.1 docker的概念 1.2 docker三个重要概念 &#xff08;1&#xff09;image镜像 &#xff08;2&#xff09;container容器 &#xff08;3&#xff09;repostory仓库 1.3 docker的主要用途 1.4 docker与虚拟机的区别 namesapce&#xff…

STM32F334timer6-7

STM32F334timer6-7概况预分频器描述计数模式时钟概况 基本计时器&#xff08;TIM6/TIM7&#xff09;功能包括&#xff1a; •16位自动重新加载递增计数器 •16位可编程预分频器&#xff0c;用于将计数器时钟频率除以1和65535之间的任何因子&#xff08;也可“动态”&#xff0…

立方体贴图shade计算

正常的平面贴图是根据mesh顶点找到对应的uv坐标&#xff0c;然后根据重心坐标插值计算三角面内每个点的uv坐标值。最后根据uv坐标值查找平面贴图上的颜色值。 立方体贴图的6个面分别为6张图片&#xff0c;我们怎么根据mesh面上的坐标值来计算对应平面上的uv坐标值。 基本算法是…

【算法篇-数论】线性筛法(欧拉筛法)筛 n 以内的质数

筛质数1.线性筛法&#xff08;欧拉筛法&#xff09;介绍2.欧拉筛法代码以及分析3.总结本文参考自 B站董晓算法 1.线性筛法&#xff08;欧拉筛法&#xff09;介绍 我们的目标是筛出 2 ~ n 以内的质数 最最最暴力的方法就是一个数一个数判断是不是质数 但是这样的时间复杂度是非…

【Java第31期】:Spring中存储Bean的注解以及用法

作者&#xff1a;有只小猪飞走了 博客地址&#xff1a;https://blog.csdn.net/m0_62262008?typeblog 这期内容&#xff1a;揭开Bean存储的神秘面纱 文章目录前言一&#xff0c;Controller&#xff08;控制存储&#xff09;二&#xff0c;Service&#xff08;服务存储&#xff…

过拟合问题(机器学习)

训练误差代表分类方法对于现有训练样本集的拟合程度 泛化误差代表此方法的泛化能力&#xff0c;即对于新的样本数据的分类能力如何 模型的训练误差比较高&#xff0c;则称此分类模型欠拟合 模型的训练误差低但是泛化误差比较高&#xff0c;则称此分类模型过拟合 对于欠拟合…

QGIS制作精美地图

QGIS制作精美地图 1.首先新建一个Print Layout,并为其命名(PS:如果创建完不小心删了,点右面的Layout Manager即可~ 2.在右侧空白处,设置页面大小(也可以在空白页面右键——属性) 3.点击Items——Add Map,然后在空白页面框画一个范围,这与ArcGIS pro的操作类似(PS:如…

【UML】类图Class Diagram

1、面向对象 面向对象分析&#xff1a;OOA&#xff08;Object-Oriented Analysis&#xff09; 面向对象设计&#xff1a;OOD&#xff08;Object-Oriented design&#xff09; 面向对象分析和面向对象设计的核心问题是怎么抽象对象。类图就是用来表示对象&#xff0c;可以表示…

JavaScript 基础1:变量与数据类型及其转换

JavaScript 基础1&#xff1a;变量与数据类型及其转换 Date: September 17, 2022 了解变量、数据类型、运算符等基础概念&#xff0c;能够实现数据类型的转换&#xff0c;结合四则运算体会如何编程。 体会现实世界中的事物与计算机的关系理解什么是数据并知道数据的分类理解变…

Path.Combine的坑

最近在写一个自动生成代码到指定文件夹的代码需要让玩家指定文件夹紧接着就遇到问题了 可以看到两个路径并没有合并。我查了一下&#xff0c;原来问题是出在总之就是有很多坑。不要用