详解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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
关于JS解构的5种有趣用法
Sep 05 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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
深入分析php之面向对象
2013/05/15 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python实现八大排序算法(2)
2017/09/14 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
大学推普周活动总结
2015/05/07 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
详解Laravel制作API接口
2021/05/31 PHP
python神经网络ResNet50模型
2022/05/06 Python