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. 安装 在项目中使用命令行工具输 ...
随机推荐
- vue 项目全局修改element-ui的样式/主题颜色
一,安装sass 1 npm i sass sass-loader --save 二,安装element主题生成工具 // 全局安装npm i element-theme --save // 安装主体 ...
- [Python图像处理] 一.图像处理基础知识及OpenCV入门函数
该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门.OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子.图像增强技术.图像分割等,后期结合深度学习研究图像识别 ...
- NUXT3.0实现网络请求二次封装
最近在开发基于nuxt3.0的项目,看了官网的网络请求,感觉不太适合,就自己基于官网的useFetch()方法封装了一个网络请求,下面开始实现封装. 第一步:新建http.ts文件,用于编写封装代码 ...
- git仓库过渡，同时向两个仓库推送代码
公司部门被大佬收购,产品项目迁移新公司仓库,过渡期间产品上线流程继续使用原公司的,新公司部署新系统后通过域名重定向逐渐将用户引流到新系统上完成切换,最后关闭原公司系统及上线流程. 过渡期间新功能代码需 ...
- 2021-07-17：一个不含有负数的数组可以代表一圈环形山，每个位置的值代表山的高度。比如， {3,1,2,4,5}、{4,5,3,1,2}或{1,2,4,5,3}都代表同样结构的环形山。山峰A和山
2021-07-17:一个不含有负数的数组可以代表一圈环形山,每个位置的值代表山的高度.比如, {3,1,2,4,5}.{4,5,3,1,2}或{1,2,4,5,3}都代表同样结构的环形山.山峰A和山 ...
- ModuleNotFoundError: No module named 'flask_sqlalchemy'
ModuleNotFoundError: No module named 'flask_sqlalchemy' 解决: pip install flask_sqlalchemy
- vue基础入门综合项目练习-悦听播放器
1.简介 根据B站视频 黑马程序员vue前端基础教程-4个小时带你快速入门vue 学习制作. 再次感谢 免费无私的教学视频. 感谢 @李予安丶 提供的精美的css. 2.展示 3.技术点 vue2 a ...
- git解决一个电脑多用户情况（win7）
首先:在输入ssh-keygen -t rsa -C "注册邮箱"后不要急着按enter,此时输入秘钥对的文件名,不要跟默认文件重名(默认的是id_rsa)
- Tomcat处理http请求之源码分析
本文将从请求获取与包装处理.请求传递给Container.Container处理请求流程,这3部分来讲述一次http穿梭之旅. 1 请求包装处理 tomcat组件Connector在启动的时候会监听端 ...
- ODOO学习网址推荐
Odoo官文文档: https://www.odoo.com/zh_cn/page/docs http://www.odoo.com/documentation/8.0/ Odoo中文文档推荐: ht ...