黑马vue---33、vue-resource 实现 get, post, jsonp请求
黑马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 的第三方包实现实现数据的请求
- 之前的学习中，如何发起数据请求？
- 常见的数据请求类型？ get post jsonp
- 测试的URL请求资源地址：
- get请求地址： http://vue.studyit.io/api/getlunbo
- post请求地址：http://vue.studyit.io/api/post
- jsonp请求地址：http://vue.studyit.io/api/jsonp
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请求的更多相关文章
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 黑马vue---1-7、vue杂记
黑马vue---1-7.vue杂记 一.总结 一句话总结: · 我最大的优势在于潜力,也就是孤独学习的能力.旁观者(l)看的比我清楚. · 那些游戏主播,比如英雄联盟主播,年复一年的玩一个游戏,一个英 ...
- vue 学习笔记—Resource
1.首先是引入 或者用npm来安装 cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...
随机推荐
- RFC destination fails with error Incomplete Logon Data after system copy
1. 问题现象 1.1在system copy后,提示RFC报错Unable to configure STMS 2. 重要的参考文件: 2.1RFC passwords not available ...
- ElasticSearch 连载一 基础入门
ElasticSearch简写ES,ES是一个高扩展.开源的全文检索和分析引擎,它可以准实时地快速存储.搜索.分析海量的数据. 应用场景 我们常见的商城商品的搜索 日志分析系统(ELK) 基于大量数据 ...
- webpack多页面打包配置
单页面应用:整个应用里面只有一个html文件.现在主流的框架,vue,react都是单页面应用. 所以webpack绝大部分都是对单页面打包.那么webpack如何对多页面进行打包 index.htm ...
- PAT1025
这道题是照着晴神的来敲,但是自己技术太渣,中间还是出现了不少问题. 1.学习到排序的做法,利用algorithm库的sort(begin,end,cmp),自己按照题目要求来完成cmp的编写 可能经常 ...
- python3 读取avro文件
官网示例文档:http://avro.apache.org/docs/current/gettingstartedpython.html#download_install 需要注意的是,官网给出的是p ...
- WA又出现了
为甚么本蒟蒻写的代码永远有BUG? 为甚么本蒟蒻永远检查不出错误? 通过良久的分析,我得出一个结论:写代码也要有信仰. 人是要有信仰的,OI选手也不例外. 原因就是写之前没有膜拜上帝.真主.释迦摩尼. ...
- 前端学习笔记--CSS样式--文本
1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:
- LOJ 103子串查找——用hash代替kmp算法
题意 给出两个字符串 $s_1,s_2$,求 $s_2$ 在 $s_1$ 中出现的次数. 分析 预处理出两个字符串的哈希值,再逐位比较. 时间复杂度为 $O(n+m)$,和 $kmp$ 算法一样. 可 ...
- 约瑟夫问题O(n)/O(mlogn)
题面 略 题解 约瑟夫问题.编号000~n−1n-1n−1,每次拿第mmm个. O(n)O(n)O(n):f[n]f[n]f[n]表示幸存的人的编号,f[n]=(f[n−1]+m)%nf[n]=(f[ ...
- [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
Measuring is extremely important, without numbers we don’t know about potential problems and we don’ ...