详解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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
jquery实现显示已选用户
Jul 21 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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入门教程 精简版
2009/12/13 PHP
浅析PHP Socket技术
2013/08/02 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python如何获取服务器硬件信息
2017/05/11 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技