背景
其實(shí)這個問題在之前的項目開發(fā)中就出現(xiàn)過,但是當(dāng)初只解決問題了,并沒有針對問題作總結(jié);于是乎今天踩到了自己埋的坑,所以決定記錄一下。那么到底是什么問題呢?就是“在安卓低版本,如果你在vue項目中使用了vue-resource(vue-resource是什么?它是一個具有ajax功能的第三方npm包),那么http請求和響應(yīng)都是正常的,但是,注意,但是來了?。?!但是響應(yīng)進(jìn)不去promise回調(diào)”,下面我們來具體看一下
正題
一、Vue Resource如何使用?
大家都知道,我們在vue項目經(jīng)常這樣使用vue-resource
1.安裝
npm install vue-resource --save
注:--save和--save-dev的區(qū)別就是,如果該npm包的代碼需要被打包到上線文件,那就--save安裝;否則就以--save-dev安裝
2.初始化(在入口文件main.js文件中)
1 import Vue from 'vue'2 import VueResource from 'vue-resource'3 // 通過Vue.use使用vue-resource,然后$http對象就被添加到每個組件實(shí)例上了4 Vue.use(VueResource)
3.使用(在組件內(nèi))
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 })
二、問題
但實(shí)際在安卓低版本中會出現(xiàn)這個問題
1 this.$http.get(url, {}).then(function (response) {2 // 無論是成功還是失敗,then中的代碼是不會被執(zhí)行的3 response.json().then(function(res) {4 // 不執(zhí)行5 })6 }, function (error) {7 // 也不執(zhí)行8 console.log(error)9 })
為何?其實(shí)vue-resource采用了ES6 Promise新特性(如何知道的?即使沒看過vue-resource的官方文檔,我們也可以知道,因?yàn)閠his.$http.get后面直接鏈?zhǔn)秸{(diào)用了then,then是Promise對象實(shí)例的方法,還記得不?),然后Promise本來就是有兼容性問題的,這就是問題的根本原因,那如何解決呢
三、解決方案
es6-promise可以解決這個問題,如何使用?很簡單,看下面的代碼
1.安裝(安裝到dependencies中)
npm install es6-promise --save
2.在入口文件main.js中引入使用
1 import Vue from 'vue'2 import VueResource from 'vue-resource'3 // cmd方式4 require('es6-promise').polyfill()5 // ES6模塊方式6 import Es6Promise from 'es6-promise'7 Es6Promise.polyfill()
大功告成,是不是很簡單,只需新增而無需刪除現(xiàn)有代碼,這樣對于已經(jīng)上線的項目是比較安全的
結(jié)語
Vue官方現(xiàn)已不推薦使用Vue Resource了,我們可以嘗試一下axios,聽說也很好用,我就打算在next project中嘗個鮮
http://www.cnblogs.com/sampapa/p/7050232.html