2021-7-6 vue和axios使用get请求api实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in message">{{item}}</li>
</ul>
<input type="button" value="显示" @click="getJoke">
</div> <script>
new Vue({
el: '#app',
data: {
message:[]
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function(response){
for(var i=0;;i++){
if(response.data.jokes[i]==null){
break;}
that.message.push(response.data.jokes[i]);
}
},function(err){
console.log(err);
})
}
}
})
</script>
</body>
</html>
2021-7-6 vue和axios使用get请求api实例的更多相关文章
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue使用axios,进行网络请求
1.首先自己创建一个组件: https://www.cnblogs.com/fps2tao/p/9559291.html 2.安装:axios(可以npm安装,也可以下载js引入文件) npm ins ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue使用axios进行ajax请求
以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...
- Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
- vue 使用 axios 时 post 请求方法传参无法发送至后台
axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...
- vue中axios的post请求使用form表单格式发送数据
vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装 在项目中使用命令行工具输 ...
随机推荐
- uniapp小程序开发准备工作
1.下载HbuilderX HBuilderX官网:https://www.dcloud.io/hbuilderx.html 下载正式版--下载完后解压--双击打开HBuilderX.exe文件就可以 ...
- 【机器学习与深度学习理论要点】11.什么是L1、L2正则化？
机器学习中几乎都可以看到损失函数后面会添加一个额外项,常用的额外项一般有两种,一般英文称作 L1-norm 和L2-norm,中文称作 L1正则化 和 L2正则化,或者 L1范数 和 L2范数.L1正 ...
- 第一章：PyTorch 入门
第一章:PyTorch 入门 1.1 Pytorch 简介 1.1.1 PyTorch的由来 1.1.2 Torch是什么? 1.1.3 重新介绍 PyTorch 1.1.4 对比PyTorch和Te ...
- Ansible中的变量
Ansible中的变量 目录 Ansible中的变量 变量概述 变量定义的方式 变量的优先级 如何定义变量 playbook中定义变量 vars_file中定义变量 系统内置变量 inventory定义 ...
- Linux修改系统时间（手动/自动同步）
一.手动修改 1.在终端窗口中输入date来查看系统当前的时间. 2.使用命令:"date -s 完整日期时间(YYYY-MM-DD hh:mm:ss)" 3.最后使用命令:&qu ...
- 2023-03-26：给定一个二维数组matrix， 每个格子都是正数，每个格子都和上、下、左、右相邻。 你可以从任何一个格子出发，走向相邻的格子， 把沿途的数字乘起来，希望得到的最终数字中，结尾的0
2023-03-26:给定一个二维数组matrix, 每个格子都是正数,每个格子都和上.下.左.右相邻. 你可以从任何一个格子出发,走向相邻的格子, 把沿途的数字乘起来,希望得到的最终数字中,结尾的0 ...
- 2021-04-29：给定一个数组 arr，代表一排有分数的气球。每打爆一个气球都能获得分数，假设打爆气 球 的分数为 X，获得分数的规则如下: 1)如果被打爆气球的左边有没被打爆的气球，找到离被打爆
2021-04-29:给定一个数组 arr,代表一排有分数的气球.每打爆一个气球都能获得分数,假设打爆气 球 的分数为 X,获得分数的规则如下: 1)如果被打爆气球的左边有没被打爆的气球,找到离被打爆 ...
- Linux：论如何在虚拟机上挂载多个镜像？
欢迎来到千汐 博客名称:千秋云染博客网址:https://www.cnblogs.com/skyrainmom 寄语:在混乱不堪的世界里你只管前行,时间替会证明一切 world cookie 我可 ...
- vst实例（2） 创建VST
前面我们知道,创建一个虚拟树,应该首先告知VST节点数据的大小(即nodedatasize),其实在创建树结构时,这一点并不是必须的,而是如果你需要让VST的每一个节点能指向一定的数据,从而在执行树的 ...
- 手把手实践丨基于STM32+华为云设计的智慧烟感系统
摘要:当前基于STM32和华为云,设计了一种智慧烟感系统,该系统可以检测烟雾,同时将检测到的数据上传到云端进行处理和分析. 本文分享自华为云社区<基于STM32+华为云设计的智慧烟感系统> ...