vue-vue resource获取数据不了数据，和ajax的区别，及vue-resource用法

来源：蜘蛛抓取(WebSpider) 时间：2017-07-31 03:27 标签： vue resource ajax
查看: 117|回复: 0
详解vue 中使用 AJAX获取数据的方法
在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。
&script type=&text/javascript&&
el:'#app',
data:{data:&&},
created:function(){
var url=&json.jsp&;
var _self=
$.get(url,function(data){
_self.data=eval(&(& + data +&)&);
this.$http.get(url).then(function(data){
var json=data.
this.data=eval(&(& + json +&)&);
},function(response){
(response);
&/script&复制代码
这里必须设置 vue的data的初始数据，即使此时数据为空。
在使用ajax获取数据时，使用vue-resource 更加合适。
使用vue-resource代码如下：
&script type=&text/javascript&&
el:'#app',
data:{data:&&},
created:function(){
var url=&json.jsp&;
this.$http.get(url).then(function(data){
var json=data.
this.data=eval(&(& + json +&)&);
},function(response){
(response);
&/script&复制代码
这里我们看到设置VUE实例数据时，直接使用 this.data 就可以设置vue的数据了。
使用jquery的时候，代码如下：
&script type=&text/javascript&&
el:'#app',
data:{data:&&},
beforeCreate:function(){
var url=&json.jsp&;
var _self=
$.get(url,function(data){
_self.data=eval(&(& + data +&)&);
&/script&复制代码
这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用，这样使用起来没有vue-resource方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持之家。
上一篇：下一篇：详解vue-resource promise兼容性问题
作者：kittySlave
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了详解vue-resource promise兼容性问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
其实这个问题在之前的项目开发中就出现过，但是当初只解决问题了，并没有针对问题作总结；于是乎今天踩到了自己埋的坑，所以决定记录一下。那么到底是什么问题呢？就是“在安卓低版本，如果你在vue项目中使用了vue-resource（vue-resource是什么？它是一个具有ajax功能的第三方npm包），那么http请求和响应都是正常的，但是，注意，但是来了啊！！但是响应进不去promise回调”，下面我们来具体看一下
一、Vue Resource如何使用？
大家都知道，我们在vue项目经常这样使用vue-resource
npm install vue-resource --save
注：--save和--save-dev的区别就是，如果该npm包的代码需要被打包到上线文件，那就--save安装；否则就以--save-dev安装
2.初始化（在入口文件main.js文件中）
import Vue from 'vue'
import VueResource from 'vue-resource'
// 通过Vue.use使用vue-resource，然后$http对象就被添加到每个组件实例上了
Vue.use(VueResource)
3.使用（在组件内）
this.$http.get(url, {}).then(function (response) {
response.json().then(function(res) {
// 这里是请求成功后的代码逻辑
}, function (error) {
// 这里是请求失败后的代码逻辑
console.log(error)
但实际在安卓低版本中会出现这个问题
this.$http.get(url, {}).then(function (response) {
// 无论是成功还是失败，then中的代码是不会被执行的
response.json().then(function(res) {
}, function (error) {
// 也不执行
console.log(error)
为何？其实vue-resource采用了ES6 Promise新特性（如何知道的？即使没看过vue-resource的官方文档，我们也可以知道，因为this.$http.get后面直接链式调用了then，then是Promise对象实例的方法，还记得不？），然后Promise本来就是有兼容性问题的，这就是问题的根本原因，那如何解决呢
三、解决方案
es6-promise可以解决这个问题，如何使用？很简单，看下面的代码
1.安装（安装到dependencies中）
npm install es6-promise --save
2.在入口文件main.js中引入使用
import Vue from 'vue'
import VueResource from 'vue-resource'
// cmd方式
require('es6-promise').polyfill()
// ES6模块方式
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
大功告成，是不是很简单，只需新增而无需删除现有代码，这样对于已经上线的项目是比较安全的
Vue官方现已不推荐使用Vue Resource了，我们可以尝试一下axios，听说也很好用，我就打算在next project中尝个鲜
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vueresource看官方文档，只看到支持异步调用。我要是想同步调用怎么办呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先你就不应该想让她同步，一个ajax通常花费的时间都“比较长”，如果是同步操作，那表示在数据响应之前，页面都会卡死，这是由于javascript本身的run-to-completion(或者单线程)特性决定。
而这种表现，用户体验极差。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
扯淡，不会就别说话
该答案已被忽略，原因：无意义的内容：赞、顶、同问等毫无意义的内容,不符合答题规范：内容不是答案，可用评论、投票替代
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App

我要回帖

更多关于 vue resource ajax 的文章

 

随机推荐