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. 安装 在项目中使用命令行工具输 ...
随机推荐
- 在Winform分页控件中集成保存用户列表显示字段及宽度调整设置
在Winform的分页控件里面,我们提供了很多丰富的功能,如常规分页,中文转义.导出Excel.导出PDF等,基于DevExpress的样式的分页控件,我们在其上面做了不少封装,以便更好的使用,其中就 ...
- 一篇文章搞定什么是nodeJs它和NPM关系与应用
现在前端的入门门槛越来越高了,不再是单纯 html+css+js,各种前端框架 层出不穷,各种ui组件库层出不穷. 模块化,打包化,各种工具库层出不穷,前端变成大前端 ,甚至前端可以搞定整个项目,通过 ...
- Jenkins - Windows环境修改主目录路径
Jenkins - Windows环境修改主目录路径 前言 如果Jenkins部署在Windows环境中,Jenkins主目录默认在 C:\Users\用户名\.jenkins下: 所有Jenkins ...
- IBM小型机 - AIX6.1系统安装教程
AIX6.1系统安装教程 由于工作原因,公司让我帮忙部署AIX小型机的系统,在各处找了很多教程,也请教了大佬协助(感谢大佬的帮助),下面以图文的形式总结了AIX 6.1系统的安装过程. 准备工作 硬件 ...
- Django4全栈进阶之路22 项目实战（三种方式开发部门管理）：方式三：FBV+ModelForm+get_object_or_404
1.视图 @login_required def department_list_view(request): departments = Department.objects.all() retur ...
- < Python全景系列-3 > Python控制流程盘点及高级用法、神秘技巧大揭秘！
欢迎来到我们的系列博客<Python全景系列>!在这个系列中,我们将带领你从Python的基础知识开始,一步步深入到高级话题,帮助你掌握这门强大而灵活的编程语法.无论你是编程新手,还是有一 ...
- APP中RN页面热更新流程-ReactNative源码分析
平时使用WebStorm或VSCode对RN工程中的文件修改后,在键盘上按一下快捷cmd+s进行文件保存,此时当前调试的RN页面就会自动进行刷新,这是RN开发相比于原生开发一个很大的优点:热更新. 那 ...
- html+css实现二级导航栏效果，简单易看懂噢！
这应该是这几天以来看到的最简单易懂的有二级菜单栏的导航栏效果实现了 使用html+css实现,看了好几天导航栏的实现方式,要么是太复杂的需要JS或者框架的,要么是太简单仅仅使用div和超链接的, 再要 ...
- 9.3. Hibernate框架
Hibernate是一个开源的持久层框架,它可以帮助我们将Java对象映射到数据库表中,并实现对象的持久化操作.Hibernate提供了丰富的API,可以方便地进行CRUD(增删改查)操作,而无需手动 ...
- Hive执行计划之一文读懂Hive执行计划
目录 概述 1.hive执行计划的查看 2.学会查看Hive执行计划的基本信息 3.执行计划步骤操作过程 4.explain extended 概述 Hive的执行计划描述了一个hiveSQL语句的具 ...