<!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实例的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  3. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  4. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  5. vue使用axios,进行网络请求

    1.首先自己创建一个组件: https://www.cnblogs.com/fps2tao/p/9559291.html 2.安装:axios(可以npm安装,也可以下载js引入文件) npm ins ...

  6. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  7. vue使用axios进行ajax请求

    以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...

  8. Vue使用Axios实现http请求以及解决跨域问题

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...

  9. vue 使用 axios 时 post 请求方法传参无法发送至后台

    axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...

  10. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

随机推荐

  1. Centos7.x 安装配置Web性能压力测试工具Siege

    一.简介 Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力.可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重 ...

  2. 2022-08-10：为了给刷题的同学一些奖励，力扣团队引入了一个弹簧游戏机， 游戏机由 N 个特殊弹簧排成一排，编号为 0 到 N-1， 初始有一个小球在编号 0 的弹簧处。若小球在编号为 i 的弹

    2022-08-10:为了给刷题的同学一些奖励,力扣团队引入了一个弹簧游戏机, 游戏机由 N 个特殊弹簧排成一排,编号为 0 到 N-1, 初始有一个小球在编号 0 的弹簧处.若小球在编号为 i 的弹 ...

  3. 玩转服务器之环境篇：PHP和Python环境部署指南

    前几篇文章中讲解了如何搭建docker和Java Web环境的方法,本篇文章来教大家搭建一个好的PHP和Python环境,可以帮助开发和运行PHP和Python应用程序,使其更加高效和稳定. 一. P ...

  4. select_related一对一、多对一查询优化

    select_related一对一.多对一查询优化 Course.objects.all().select_related('teacher') 查询课程时顺带查出老师的信息

  5. Could not resolve com.android.tools.lint:lint-kotlin:26.2.0.

    好久没有使用weexplus publish android 打包apk, 今一运行失败了,提示Could not resolve com.android.tools.lint:lint-kotlin ...

  6. 为什么 HashMap 会死循环？

    HashMap 死循环发生在 JDK 1.8 之前的版本中,它是指在并发环境下,因为多个线程同时进行 put 操作,导致链表形成环形数据结构,一旦形成环形数据结构,在 get(key) 的时候就会产生 ...

  7. Electron-ChatGPT桌面端ChatGPT实例|electron25+vue3聊天AI模板EXE

    基于electron25+vite4+vue3仿制chatgpt客户端聊天模板ElectronChatGPT. electron-chatgpt 使用最新桌面端技术Electron25.x结合Vite ...

  8. NSDI-2023 微软论文：解构有状态网络功能

    本文通过chatgpt代理站(支持gpt4):gptschools.cn翻译整理 微软Azure对每个虚拟机进行了为期三个月的网络监控,获得了新建.并发.PPS等指标情况,发现: 1) 网络功能负载不 ...

  9. 【接口测试】Postman（三）-变量与集合

    变量与集合 ​ 在Postman中,我们进行接口测试一般是以集合为单位,而在日常应用中,我们会经常使用到变量.下面我们将介绍一下变量和集合的一些用法. 文章目录导航: 目录 变量与集合 一.变量 1. ...

  10. 用JavaScript撸一个静态链表

    最近重新开始翻起<大话数据结构>,看到了静态链表部分里面讲C语言是利用数组模拟,觉得十分有趣.但是在JavaScript中,也可以用类似的方式去实现,定义一个数据域和一个结点域,然后实现链 ...