详解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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
简单了解JavaScript异步
May 23 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
JavaScript异步操作中串行和并行
Nov 20 Javascript
JS函数式编程实现XDM一
Jun 16 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/07/30 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
简单实现python画圆功能
2018/01/25 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
学生出入校管理制度
2014/01/16 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
zabbix配置nginx监控的实现
2022/05/25 Servers