您的位置:首頁>正文

vue-resource promise相容性問題

背景

其實這個問題在之前的專案開發中就出現過, 但是當初只解決問題了, 並沒有針對問題作總結;於是乎今天踩到了自己埋的坑, 所以決定記錄一下。 那麼到底是什麼問題呢?就是“在安卓低版本, 如果你在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 --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

大功告成,

是不是很簡單, 只需新增而無需刪除現有代碼, 這樣對於已經上線的專案是比較安全的

結語

Vue官方現已不推薦使用Vue Resource了, 我們可以嘗試一下axios, 聽說也很好用, 我就打算在next project中嘗個鮮

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示