一、使用vue-resource发起get请求

github仓库地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

<body>

<div id="app">

   <input type="button" value="get请求" @click="vueget()"/>

</div>

<script src="../lib/vue-resource-1.3.4.js"></script>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

        },

        methods:{

            vueget(){

                console.log(this.$http)

                })

            }

        }

    })

</script>

</body>

如果在没有导入vue-resource的时候

console.log(this.$http) ====> undefined

如果导入了vue-resource

那么console.log(this.$http) 结果如下

<div id="app">

   <input type="button" value="get请求" @click="vueget()"/>

</div>


methods:{

    vueget(){

  // console.log(this.$http)

   this.$http.get('http://api.cms.liulongbin.top/api/getlunbo').then(function (data) {

   console.log(data)

   console.log(data.body)

   console.log(data.body.message)

                })

            }

        }

来吧展示：

二、使用async和awite来修饰实现数据请求的异步方法

methods:{

 async vueget(){

 //这样一修饰，在内部就可以使用await

  //使用await去修饰法异步请求的方式

  //这样后面就不用点then了

  // await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')

  //定义一个变量去接收一下请求的数据

 var result = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')

 console.log(result)

//这个方法不用.then 直接await调用this.$http.get()，然后输入返回值

   }

}

来吧展示：



从一个对象中使用结构赋值 {} 拿到对应的属性

var { body } = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')

console.log(body)

console.log(body.message)

来吧展示：

三、使用vue-resource发起post请求

<input type="button" value="post请求" @click="vuepost()"/>


async vuepost(){

var {body} = await

 // post 方法接收三个参数：

  // 参数1： 要请求的URL地址

  // 参数2： 要发送的数据对象

  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded

this.$http.post('http://api.cms.liulongbin.top/api/post',{

name:'千夏',age:18,hobbies:'吃饭睡觉敲代码'

    })

 console.log(body)

}

来吧展示：

四、使用vue-resource发起jsonp请求

 <input type="button" value="jsonp请求" @click="vuejsonp()"/>


 async vuejsonp(){

     var {body} = await this.$http.jsonp('http://api.cms.liulongbin.top/api/jsonp')

     console.log(body)

  }

来吧展示：

五、使用axios结合vue发起get请求

  1. 导入axios文件
<script src="../lib/axios-v0.17.1.js"></script>
  1. 在vm区域中，触发点击事件
<div id="app">

    <input type="button" value="get请求" @click="vueget()"/>

</div>
  1. 使用axios结合vue发起get请求
methods:{

   async vueget(){

   const result = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')

//也可以写成

//const {data} = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')

//console.log(data)

   console.log(result)

    }

}

来吧展示：



如果想要axios和vue-resource中的get一样使用this.$http.get()去发送请求，方法如下：

//把axios挂载到vue构造函数的原型上

    Vue.prototype.$http = axios

    var vm = new Vue({

        el: '#app',

        data: {

        },

        methods:{

         async vueget(){

          const {data} = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')

          console.log(data)

       }

        }

    })

六、 JSONP的实现原理

  • 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
  • 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
  • 具体实现过程：
    • 先在客户端定义一个回调方法，预定义对数据的操作；
    • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
    • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
    • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

vue学习笔记（三）---- vue-resource的更多相关文章

  1. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  2. Vue学习笔记三：v-bind，v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  5. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  6. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  7. vue学习笔记(三)：vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  8. vue学习笔记三：常见的表单绑定

    <template> <div id="app"> <input type="checkbox" id="checked ...

  9. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  10. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

随机推荐

  1. 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码（简易版）

    theme: cyanosis 最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!! 先看效果: 代码拆解: 主要是分为3大部分 分子颗粒 爱心 动画 代码实现: 分子颗 ...

  2. pinpoint：查看hbase表和修改数据过期时间

    先做个记录,监控数据量过大时可以设置表的数据过期时间来清理数据. 1. 查找本地数据表大小 [root@ZWZF-CWY-LZY-12 ~]# cd /home/pinpoint/hbase/data ...

  3. Windows骚操作

    电脑常用的快捷键 键盘功能健:Tab.Shift.Ctrl.Alt.Windows.Enter.空格.上下左右健.CapsLock(大小写转换).NumLock(对小键盘控制开/关) 键盘快捷键:全选 ...

  4. ElasticSearch深度分页详解

    1 前言 ElasticSearch是一个实时的分布式搜索与分析引擎,常用于大量非结构化数据的存储和快速检索场景,具有很强的扩展性.纵使其有诸多优点,在搜索领域远超关系型数据库,但依然存在与关系型数据 ...

  5. 2022春每日一题：Day 14

    题目:字符串归类 发现字符串长度总数不大,因此把每个字符串有的字母分离,存放到桶中,再枚举合并即可,时间复杂度O(len) 赛时代码: #include <cstdio> #include ...

  6. Go语言核心36讲01

    你好,我是郝林,今天我分享的内容是:0基础的你,如何开始入门学习Go语言. 1. 你需要遵循怎样的学习路径来学习Go语言? 我们发现,订阅本专栏的同学们都在非常积极的学习和讨论,这让我们非常欣慰,并且 ...

  7. Java：自定义排序与sort()函数

    自定义排序与Arrays.sort() 本篇题目来源:2022/11/13 Leetcode每日一题:https://leetcode.cn/problems/custom-sort-string 给 ...

  8. JUC-学习笔记

    传统的多线程开发方式 implements Runnable public class oldThreadDev implements Runnable { @Override public void ...

  9. Oracle 两字符串相似度比较

    select SYS.UTL_MATCH.edit_distance_similarity('为中华之举起而读书','为中华') from dual;

  10. 【Shell案例】【wc记录单词长度、for循环和if、awk文本分析工具】7、打印字母数小于8的单词

    描述写一个 bash脚本以统计一个文本文件 nowcoder.txt中字母数小于8的单词. 示例:假设 nowcoder.txt 内容如下:how they are implemented and a ...