黑马vue---33、vue-resource 实现 get, post, jsonp请求

一、总结

一句话总结：

vue-resource使用非常非常非常简单：this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {console.log(result.data)})
//  当发起get请求之后， 通过 .then 来设置成功的回调函数

this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {

    // 通过 result.body 拿到服务器返回的成功的数据

    // console.log(result.body)

})

1、vue-resource的post请求实例？

this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
//  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了

//  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

console.log(result.body)

})

2、vue-resource的jsonp请求实例？

this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {

console.log(result.body)

})

3、手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了，如何解决？

通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

console.log(result.body)

})

二、vue-resource 实现 get, post, jsonp请求

1、相关知识

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

  1. 之前的学习中，如何发起数据请求？
  2. 常见的数据请求类型？ get post jsonp
  3. 测试的URL请求资源地址：
 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

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

   <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->

   <!-- this.$http.jsonp -->

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

 </head>

 <body>

   <div id="app">

     <input type="button" value="get请求" @click="getInfo">

     <input type="button" value="post请求" @click="postInfo">

     <input type="button" value="jsonp请求" @click="jsonpInfo">

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {

         getInfo() { // 发起get请求

           //  当发起get请求之后， 通过 .then 来设置成功的回调函数

           this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {

             // 通过 result.body 拿到服务器返回的成功的数据

             // console.log(result.body)

           })

         },

         postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded

           //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了

           //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

           this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

             console.log(result.body)

           })

         },

         jsonpInfo() { // 发起JSONP 请求

           this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {

             console.log(result.body)

           })

         }

       }

     });

   </script>

 </body>

 </html>
 

黑马vue---33、vue-resource 实现 get, post, jsonp请求的更多相关文章

  1. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  2. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  3. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  4. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  5. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  6. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  7. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  8. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  9. 黑马vue---1-7、vue杂记

    黑马vue---1-7.vue杂记 一.总结 一句话总结: · 我最大的优势在于潜力,也就是孤独学习的能力.旁观者(l)看的比我清楚. · 那些游戏主播,比如英雄联盟主播,年复一年的玩一个游戏,一个英 ...

  10. vue 学习笔记—Resource

    1.首先是引入  或者用npm来安装  cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...

随机推荐

  1. iOS 中 UIView 和 CALayer 的关系

    UIView 有一个名叫 layer ,类型为 CALayer 的对象属性,它们的行为很相似,主要区别在于:CALayer 继承自 NSObject ,不能够响应事件. 这是因为 UIView 除了负 ...

  2. stm32 视频小车

    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...

  3. 九、分组查询详解（group by & having）

    本篇内容 分组查询语法 聚合函数 单字段分组 多字段分组 分组前筛选数据 分组后筛选数据 where和having的区别 分组后排序 where & group by & having ...

  4. [476] Database Mail is not enabled for agent notifications. Cannot send e-mail to

    配置完DB Mail后JOB的的通知邮件不能发送,日志报错476] Database Mail is not enabled for agent notifications. Cannot send ...

  5. Android笔记 （二） Android的核心---Activity

    什么是Activity Activity是Android应用程序核心组件中最基本的一个,是用户和程序交互的窗口,一个activity通常对应一个单独的视图,一个APP由一个或者多个activity构成 ...

  6. Linux sudo(CVE-2019-14287)漏洞复现过程

    简述: 该漏洞编号是CVE-2019-14287. sudo是Linux系统管理指令,允许用户在不需要切换环境的前提下用其他用户的权限运行程序或命令,通常是以root身份运行命令,以减少root用户的 ...

  7. IAR建立stm32工程

    stm32是一个当下非常流行的微控制器,很多人都加入了学习stm32的行列中,常用的stm32编译器有IAR和mdk两种,接下来是利用stm32固件库3.5在IAR下的建立的工程模板历程: 1.在常用 ...

  8. STM32 LoRaWAN探索板B-L072Z-LRWAN1中文用户手册

    UM2115用户手册 支持LoRaWAN和 LPWAN协议的STM32L0探索套件 前言 B-L072Z-LRWAN1探索套件采用了 Murata公司的CMWX1ZZABZ-091 LoRa模块.该探 ...

  9. P1280 尼克的任务[区间覆盖dp]

    题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从第一分钟开始 ...

  10. .NET Core 调试出现“应用程序处于中断模式”

    今天再看博客园的大神博客,按照例子写了一个文件读写的示例(对 .NET Core FileProvider 的应用). 在调试的时候出现了“应用程序处于中断模式”的问题,继续的话程序并没有向下执行,看 ...