详解vue-resource promise兼容性问题


Posted in Javascript onJune 20, 2017

背景

其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结;于是乎今天踩到了自己埋的坑,所以决定记录一下。那么到底是什么问题呢?就是“在安卓低版本,如果你在vue项目中使用了vue-resource(vue-resource是什么?它是一个具有ajax功能的第三方npm包),那么http请求和响应都是正常的,但是,注意,但是来了啊!!但是响应进不去promise回调”,下面我们来具体看一下

 正题

一、Vue Resource如何使用?

大家都知道,我们在vue项目经常这样使用vue-resource

1.安装

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中尝个鲜

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 #Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 #Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
js实现随机数字字母验证码
Jun 19 #Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
一个简单的PHP&MYSQL留言板源码
2020/07/19 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
CI框架常用函数封装实例
2016/11/21 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
浅谈js闭包理解
2019/04/01 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python 实时遍历日志文件
2016/04/12 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python实现飞机大战项目
2020/03/11 Python
降低python版本的操作方法
2020/09/11 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
商铺租赁意向书
2014/04/01 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
纪检监察建议书
2014/05/19 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android