详解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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
JavaScript修改css样式style
2008/04/15 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
授权委托书样本
2014/04/03 职场文书
物流专业求职信
2014/06/30 职场文书
质量月活动总结
2014/08/26 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
开幕式邀请函
2015/01/31 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
检讨书格式
2019/04/25 职场文书
python 提取html文本的方法
2021/05/20 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Redis读写分离搭建的完整步骤
2021/09/14 Redis
delete in子查询不走索引问题分析
2022/07/07 MySQL