【Vue】通过Axios实现异步通信(简单案例)

一、Axios介绍

1、是什么

    Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。当然这些请求ajax和jquery也能做,但是由于Vue、React等框架的出现,促使了Axios轻量级库的出现,因为Vue等,不需要操作Dom,所以不需要引入Jquery.js了。这样一来Axios就会更加方便。

2、特性

官网连接:起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

b3121e5c032848ad821d31dce4d920fd.png

3、安装

使用 npm(使用Vue框架的时候安装):

$ npm install axios

使用 unpkg CDN:

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

4、使用语法

以post和get请求为例(ps:axios的使用有很多种方法):

post请求(ps:在URL后可以携带参数)

axios.post('URL') .then(function(response){  });

get请求(ps:在URL后可以携带参数)

axios.get('URL') .then(function(response){  });

二、案例实操

   这里我们通过一个代码段来实现一下axios的数据请求功能。

①:我们准备好vue和axios所需的cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②:编写一段data.json

{"name": "lfy","age": 18,"url": "http://baidu.com","page": 1,"address": {"street": "快乐街","city": "成都","country": "中国"},"list": ["Java","c++","Php"]
}

③:在vue实例中,编写对象接受data.json的数据,并通过前端显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="vue"><div>{{info.name}}</div><div v-for="item in info.list">{{item}}</div><a v-bind:href="info.url">点我</a>
</div><!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">var vm=new Vue({el:"#vue",data(){//这是一个data函数return{//请求的返回参数必须和json字符串格式一样info:{name:null,address:{street:null,city:null,country:null},url:null,list:[]}}},mounted(){//钩子函数 链式编程 ES6新特性axios.get('../data.json').then(response=>(console.log(this.info=response.data)))}});
</script>
</body>
</html>

效果:

90c3b40aae964abd8ac0d649aecd18bb.png

三、总结

   这里写的内容比较简单,只是一个关于axios的介绍和简单的案例演示,希望对正在观看的小伙伴有所帮助!

 

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

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

相关文章

LabVIEW专栏九、类的应用

一、类的应用 接上一章"类" 类在项目中&#xff0c;一般会在类的私有成员簇内&#xff0c;包含一个数据类型为参数类的队列。 例如网口类&#xff0c;里面实际会包含很多信息&#xff0c;有IP地址和端口等等参数。这些参数如果不放在队列引用中缓存下来&#xff0c;…

HarmonyOS开发实战(黑马健康系列一:欢迎页)

系列文章目录 &#xff08;零&#xff09;鸿蒙HarmonyOS入门&#xff1a;如何配置环境&#xff0c;输出“Hello World“ &#xff08;一&#xff09;鸿蒙HarmonyOS开发基础 &#xff08;二&#xff09;鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 &#xff08;三&#xff09;鸿蒙…

【Qt QML】TabBar的用法

Qt Quick中的TabBar提供了一个基于选项卡的导航模型。TabBar由TabButton控件填充&#xff0c;并且可以与任何提供currentIndex属性的布局或容器控件一起使用&#xff0c;例如StackLayout或SwipeView。 import QtQuick import QtQuick.Controls import QtQuick.LayoutsWindow …

AWS SES发送邮件如何正确配置?操作指南?

AWS SES发送邮件有哪些限制&#xff1f;AWS SES发信的注意事项&#xff1f; AWS SES作为亚马逊云服务提供的一项高效、可靠的电子邮件发送服务&#xff0c;受到了众多企业的青睐。然而&#xff0c;如何正确配置AWS SES发送邮件。AokSend将详细解析AWS SES发送邮件的配置过程&a…

MIS微调SAM模型实时交互UI界面

前言 SAM模型的基本介绍可见SAM&#xff08;Segment Anything Model&#xff09;大模型使用--point prompt_sam大模型-CSDN博客 针对Meta团队去年发布的SAM大模型在医学图像分割领域表现性能较差的情况&#xff0c;笔者收集了一些MIS领域的数据集对SAM的架构进行fine tune&am…

vue快速入门(四十三)axios模块的安装与引入

步骤很详细&#xff0c;直接上教程 上一篇 在项目目录打开终端 输入以下命令安装axios npm i axios重新打开项目即可完成按照 测试 源码 main.js import Vue from vue import App from ./App.vue//全局引入axios // 引入axios import axios from axios; // 挂载到vue原型…

BGP配置和应用案例

策略路由的配置步骤 l 策略路由的配置步骤如下&#xff1a; 创建route-map 通过ACL匹配感兴趣的数据&#xff0c;定义策略动作 在指定接口下通过ip policy 命令应用route-map l 最终实现对通过该接口进入设备的数据进行检查&#xff0c;对匹配的数据执行规定的策略…

【A-034】基于SSH的电影订票系统(含论文)

【A-034】基于SSH的电影订票系统&#xff08;含论文&#xff09; 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MySQLIntelliJ IDEA(Eclipse) 数据库&#xff1a; MySQL 技术&#xff1a; SpringStruts2HiberanteJSPJquery 适用于&#xff1a; 课程设计&#xff0c;毕业设计&…

7.MyBatis 操作数据库(初阶)

文章目录 1.什么是MyBatis2.为什么要学习 MyBatis&#xff1f;3.通过spring框架创建MyBatis项目3.1使用MyBatis查询数据库3.2 mysql连接不上报错解决方法 4.MyBatis的基础操作4.1企业建表规范&#xff1a;4.2MyBatis基本实现4.3单元测试4.4使用MyBatis可能遇到的问题4.5配置MyB…

Jsoncpp搭建交叉编译环境(移植到arm)

1. 官网下载源码 github地址&#xff1a;GitHub - open-source-parsers/jsoncpp at update 2. 交叉编译环境 当前平台/开发平台-编译环境&#xff1a; [rootlocalroot ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootlocalroot ~]# uname -a Lin…

4.7 海思SS928开发 - uboot开发 - 自定义分区以及启动方案

4.7 uboot开发 - 自定义分区以及启动方案 ss928 出厂默认的启动方式以及 emmc 默认的分区&#xff0c;不符合需求&#xff0c;考虑自己做一个分区方案以及启动方案。 分区方案 分区表如下&#xff1a; 分区文件系统分区说明fastboot-存放 bootloaderubootenv-存储 uboot 环境…

【预测】小米汽车电子电气架构的猜想

文章目录 前言 整车EEA 硬件平台 软件平台 总结 参考资料 前言 见《【Review】小米汽车发布会》 整车EEA 小米汽车整车电子电气架构方面的信息&#xff0c;小米官方并没有对外介绍&#xff0c;但是从近日流出的整车BOM和供应商列表中看到&#xff0c;车上各种控制器一个都…

蓝牙低能耗安全连接 – 数值比较

除了 LE Legacy 配对之外&#xff0c;LE Secure Connections 是另一种配对选项。 LE 安全连接是蓝牙 v4.2 中引入的增强安全功能。它使用符合联邦信息处理标准 (FIPS) 的算法&#xff08;称为椭圆曲线 Diffie Hellman (ECDH)&#xff09;来生成密钥。对于 LE 安全连接&#xff…

图像处理技术与应用(二)

图像处理技术与应用入门 椒盐噪声 椒盐噪声&#xff0c;也称为脉冲噪声&#xff0c;是一种常见的数字图像噪声。它通常表现为图像中随机出现的白色&#xff08;椒&#xff09;或黑色&#xff08;盐&#xff09;像素点&#xff0c;这些像素点在图像上呈现为黑白杂点。椒盐噪声…

算法项目(9)—— 大模型实现PDF检索加QA

本文包含什么? 使用大语言模型进行多个PDF问答检索加QA.gradio实现的网页界面操作,全套代码以及代码介绍运行有问题? csdn上后台随时售后.项目说明 本项目实现使用大语言模型为核心,gradio框架,调用vicuna实现多个pdf QA 代码运行 python3 main.pyimport gradio as gr fr…

云计算革新:以太网 Scale-UP 网络为 GPU 加速赋能

谈谈基于以太网的GPU Scale-UP网络 Intel Gaudi-3 采用 RoCE 互联技术&#xff0c;促进了 Scale-UP 解决方案。业界专家 Jim Keller 倡导以太网替代 NVLink。Tenstorrent 成功应用以太网实现片上网络互联。RoCE 和以太网已成为互联解决方案的新兴趋势&#xff0c;为高性能计算提…

视频中为什么需要这么多的颜色空间?

在视频处理中&#xff0c;经常会用到不同色彩空间&#xff1a;非线性RGB&#xff0c;线性 RGB&#xff0c;YUV&#xff0c;XYZ……为什么需要这么多的色彩空间呢&#xff1f; 1、视频采集时的线性RGB颜色空间 由数码相机中的 CMOS 传感器产生并写入原始文件&#xff08;Raw Fil…

艾瑞泽5汽车电子控制单元CAN通信数据读写车辆网络系统交互接口

艾瑞泽5的网关接口数据交换通常涉及车辆内部电子设备之间的信息传输&#xff0c;包括车身系统、娱乐系统、远程控制、车辆状态监控、CAN数据采集分析、整车DBC控制策略等信息。 艾瑞泽5作为一款采用CAN协议的汽车&#xff0c;其CAN通信的开发可以提高车辆的安全性、可靠性和实…

怎么设置 idea terminal 窗口的编码格式

1 修改Terminal 窗口为 Git bash 窗口 打开 settings 设置界面&#xff0c;选择 Tools 中的 Terminal (File -> settings -> Tools -> Terminal) 修改 Shell path 为你的 Git bash 安装路径&#xff0c;我的在 C:\my_software\java\Git\bin\bash.exe 2 解决中文显示…