背景
其實這個問題在之前的專案開發中就出現過, 但是當初只解決問題了, 並沒有針對問題作總結;於是乎今天踩到了自己埋的坑, 所以決定記錄一下。 那麼到底是什麼問題呢?就是“在安卓低版本, 如果你在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檔中)
1 import Vue from 'vue' 2 import VueResource from 'vue-resource' 3 // 通過Vue.use使用vue-resource, 然後$http物件就被添加到每個元件實例上了 4 Vue.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中)
npm install es6-promise --save2.在入口文件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大功告成,
結語
Vue官方現已不推薦使用Vue Resource了, 我們可以嘗試一下axios, 聽說也很好用, 我就打算在next project中嘗個鮮