Vue-axios的get、post请求

news2025/2/24 12:15:25

  • 直接在控制台上打印axios会报错,打印fetch就不会; 
  • 因为fetch是标准,axios是第三方,要想用axios,就必须引入想应的js文件;
  • axios-js文件下载:npm 
  • 搜索axios,点进去,往下找:

  • 打开链接:“https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js”,ctrl+s保存源码,就下载好了;
  • 然后引入到html中就可以使用了。

get方式:axios请求数据核心代码

axios.get("./test.json").then(res => {
          console.log(res)
          //数据在res.data.data.films里
          console.log(res.data.data.films)
     })

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick">axios</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                
            },
            methods:{
                handleClick(){
                    axios.get("./test.json").then(res => {
                        console.log(res)
                        //数据在res.data.data.films里
                        console.log(res.data.data.films)

                    })
                }
            }
        })
    </script>
</body>
</html>

结果:


post方式:不用写headers

携带的信息放在第二个参数位置上就可以了,不用写其他的;

            handleClick(){
                    axios.post("./test.json","name=yiyi&age=100").then(res => {
                        console.log(res)
                        //数据在res.data.data.films里
                        console.log(res.data.data.films)

                    })
                }
axios.post("./test.json",{name:"yiyi",age:100})
  • axios请求数据的方式比fetch方式更简单,直接一个then就可以;
  • 而且post方式还不用写headers,直接写数据,会自动查看你携带的数据是什么类型;

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

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

相关文章

智云通CRM:如何清除销售前被拒绝的怀疑和猜测?

在做CRM销售时&#xff0c;经常遇到被客户拒绝的情况&#xff0c;没有人喜欢被拒绝&#xff0c;因为拒绝辉让人痛苦、难过&#xff0c;但现实中又无法避免被拒绝&#xff0c;尤其是销售人员&#xff0c;对销售人员来说&#xff0c;被拒绝是家常便饭。遭到拒绝后&#xff0c;经常…

基于51单片机pwm调光护眼台灯智能检测光强光控灯设计proteus仿真原理图PCB

功能&#xff1a; 0.本系统采用STC89C52作为单片机 1.LCD1602液晶实时显示当前时间/模式/亮度等级 2.按’切换’键可切换四种不同的模式 a) 自动开关&#xff0c;自动调节亮度 b) 手动开关&#xff0c;自动调节亮度 c) 自动开关&#xff0c;手动调节亮度 d) 手动开关&#xff0…

arthas诊断工具

1.安装 linux: curl -o https://alibaba.github.io/arthas/arthas-boot.jar //是O不是零 浏览直接访问https://alibaba.github.io/arthas/arthas-boot.jar 在运行程序之前,需要运行一个java进程在内存种 java -jar arthas-boot.jar 按序号选择诊断的进程 选择序号回车 2.卸载…

​生成图片并添加文字Image.new()与ImageDraw.drawer.text()方法​

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 生成图片并添加文字 Image.new()与ImageDraw.drawer.text()方法 [太阳]选择题 以下python代码表述错误的一项是? from PIL import Image,ImageDraw,ImageFont imgImage.new(modeRGB,…

计算机网络第六章知识点回顾(自顶向下)

第六章知识点回顾1.链路层和局域网1.1网络层、链路层和物理层1.2链路层服务1.3链路层在哪儿实现&#xff1f;1.3.1网络适配器之间的通信1.4检错和纠错1.5如何检测与纠正错误&#xff1f;1.5.1编码集的检错与纠错能力1.5.2差错检测的实施1.5.3奇偶校验1.5.4循环冗余校验&#xf…

图像分割 - 区域生长

目录 1. 介绍 2. 代码详解 3. 代码 1. 介绍 分割的目的是将图像分为多个区域 常用的分割方法基于两个属性&#xff1a;不同区域间的灰度不连续性质&#xff08;Canny边缘检测等等&#xff09;、相同区域灰度的相似特征&#xff08;阈值处理、区域生长等等&#xff09; 区…

牛客网语法篇练习基础语法(一)

1.输出"Hello Nowcoder!"。开始你的编程之旅吧。 print(Hello Nowcoder!) 2.KiKi学会了print在屏幕输出信息&#xff0c;他想输出一架小飞机。请帮他编写程序输出这架小飞机。 print( *5 ** *5) print( *5 ** *5) print(**12) print(**12) print( *4 * * *4) prin…

Arduino操作MPU6050模块

MPU6050是集成三轴陀螺仪&#xff0c;三轴加速度计&#xff0c;温度传感器于一体的模块。本文档基于Adafruit_MPU6050实现MPU6050模块基本操作。 Adafruit_MPU6050库&#xff1a; https://github.com/adafruit/Adafruit_MPU6050 Adafruit_MPU6050依赖以下库&#xff0c;需要在…

Java中的char、Character和CharSequence的区别

char 与 Character char是一种基本的数据类型&#xff0c;Character是char类型的包装类&#xff0c;即通过Character创建出来的是一种对象。 Character是char的包装类&#xff0c;就像Integer和int&#xff0c;以及Long和long一样。 包装类和基本类型可以自动转换&#xff…

安泰测试-同惠TH2827精密LCR数字电桥产品性能特点

同惠(Tonghui)TH2827A/TH2827B/TH2827C型 LCR数字电桥 产品简介&#xff1a; TH2827A/TH2827B/TH2827C是具有多种功能和更高测试频率的新型LCR数字电桥&#xff0c;体积小&#xff0c;紧凑便携&#xff0c;便于上架使用。本系列仪器基本精度为0.05%&#xff0c;测试频率最高1M…

GitLab仓库管理系统安装详细步骤

前言 本案例安装 gitlab、jenkins、并部署springboot应用程序&#xff0c;所以准备了3台服务器。 服务器1&#xff1a;安装gitlab服务器2&#xff1a;安装jdk、maven、git、jenkins 因为jenkins需要jdk、maven、git服务器3&#xff1a;安装jdk。 jenkins自动部署的springboot…

多目标优化生态调度结果的预测方法研究——基于新蝙蝠算法(Matlab代码实现)

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…

【CNN】ZFNet——让卷积神经网络不再是一个黑盒模型。

前言 ZFNet在2013年 ILSVRC 图像分类竞赛获得冠军&#xff0c;错误率11.19% &#xff0c;比2012年的AlexNet降低了5%&#xff0c;ZFNet是由 Matthew D.Zeiler 和 Rob Fergus 在 AlexNet 基础上提出的大型卷积网络。ZFNet解释了为什么卷积神经网络可以在图像分类上表现的如此出…

[MySQL]事务ACID详解

专栏简介 :MySql数据库从入门到进阶. 题目来源:leetcode,牛客,剑指offer. 创作目标:记录学习MySql学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录 1. 事务的概念 2. 事务的特性 3.事务控制语法…

【经验篇】Java使用ZMQ断线重连问题

简介 ZeroMQ是一个高性能的异步消息传递库&#xff0c;旨在用于分布式或者并发应用程序。它提供了一个消息队列&#xff0c;但与面向消息的中间件不同&#xff0c;ZeroMQ 系统可以在没有专用消息代理的情况下运行。 ZeroMQ 支持各种传输&#xff08;TCP、进程内、进程间、多播…

初步认识端口服务查询--netstat

转载连接&#xff1a;netstat详解 目录1、语法与参数概括2、输出释义2.1 以netstat -atnlp为例&#xff0c;解释输出结果中各列的含义2.2、以netstat -rn为例&#xff0c;解释输出结果中各列的含义3、实用命令4、项目中通过netstat查询某端口是否被占用netstat命令是一个监控TC…

Spring5源码3-BeanDefinition

1. BeanDefinition BeanDefinition在spring中贯穿始终&#xff0c;spring要根据BeanDefinition对象来实例化bean&#xff0c;只有把解析的标签&#xff0c;扫描的注解类封装成BeanDefinition对象&#xff0c;spring才能实例化bean beanDefinition主要实现类: ChildBeanDefini…

ADB安装及使用详解

一、ADB简介 1、什么是adb ADB 全称为 Android Debug Bridge&#xff0c;起到调试桥的作用&#xff0c;是一个客户端-服务器端程序。其中客户端是用来操作的电脑&#xff0c;服务端是 Android 设备。 ADB 也是 Android SDK 中的一个工具&#xff0c;可以直接操作管理 Androi…

K8s高可用集群搭建

K8s高可用集群搭建1 方案简介2 集群搭建2.1 安装要求2.2 准备环境2.3 master节点部署keepalived2.4 master节点部署haproxy2.5 所有节点安装docker/kubeadm/kubelet2.6 部署k8smaster012.7 安装集群网络2.8 k8smaster02加入节点2.9 k8snode01加入集群3 测试集群1 方案简介 用到…

Session-based Recommendation with Graph Neural Networks论文阅读笔记

1. Abstract &#xff08;1&#xff09;基于会话的推荐问题旨在基于匿名会话来预测用户的行为。 The problem of session-based recommendation aims to predict user actions based on anonymous sessions. &#xff08;2&#xff09; 以前的方法存在的不足&#xff1a;不足以…