其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结;于是乎今天踩到了自己埋的坑,所以决定记录一下。那么到底是什么问题呢?就是 "在安卓低版本,如果你在 vue 项目中使用了 vue-resource(vue-resource 是什么?它是一个具有 ajax 功能的第三方 npm 包),那么 http 请求和响应都是正常的,但是,注意,但是来了啊!!但是响应进不去 promise 回调",下面我们来具体看一下
大家都知道,我们在 vue 项目经常这样使用 vue-resource
1. 安装
- npminstallvue-resource --save
注:--save 和 --save-dev 的区别就是,如果该 npm 包的代码需要被打包到上线文件,那就 --save 安装;否则就以 --save-dev 安装
2. 初始化(在入口文件 main.js 文件中)
- 1import Vue from 'vue'2import VueResource from 'vue-resource'3 // 通过Vue.use使用vue-resource,然后$http对象就被添加到每个组件实例上了
- 4Vue.use(VueResource)
3. 使用(在组件内)
- 1 this.$http.get(url, {}).then(function(response) {
- 2 response.json().then(function(res) {
- 3 // 这里是请求成功后的代码逻辑
- 4
- }) 5
- },
- function(error) {
- 6 // 这里是请求失败后的代码逻辑
- 7 console.log(error) 8
- })
但实际在安卓低版本中会出现这个问题
- 1 this.$http.get(url, {}).then(function(response) {
- 2 // 无论是成功还是失败,then中的代码是不会被执行的
- 3 response.json().then(function(res) {
- 4 // 不执行
- 5
- }) 6
- },
- function(error) {
- 7 // 也不执行
- 8 console.log(error) 9
- })
为何?其实 vue-resource 采用了 ES6 Promise 新特性(如何知道的?即使没看过 vue-resource 的官方文档,我们也可以知道,因为 this.$http.get 后面直接链式调用了 then,then 是 Promise 对象实例的方法,还记得不?),然后 Promise 本来就是有兼容性问题的,这就是问题的根本原因,那如何解决呢
es6-promise 可以解决这个问题,如何使用?很简单,看下面的代码
1. 安装(安装到 dependencies 中)
- npminstalles6-promise --save
2. 在入口文件 main.js 中引入使用
- 1import Vue from 'vue'2import VueResource from 'vue-resource'3 // cmd方式
- 4require('es6-promise').polyfill()
- 5 // ES6模块方式
- 6import Es6Promise from 'es6-promise'7Es6Promise.polyfill()
大功告成,是不是很简单,只需新增而无需删除现有代码,这样对于已经上线的项目是比较安全的
Vue 官方现已不推荐使用 Vue Resource 了,我们可以尝试一下 axios,听说也很好用,我就打算在 next project 中尝个鲜
来源: http://www.cnblogs.com/sampapa/p/7050232.html