详解vue-resource promise兼容性问题_网络技术_宿州市腾雀网络科技有限公司

详解vue-resource promise兼容性问题

发布时间 - 2026-01-11 01:57:33 点击率：次

背景

其实这个问题在之前的项目开发中就出现过，但是当初只解决问题了，并没有针对问题作总结；于是乎今天踩到了自己埋的坑，所以决定记录一下。那么到底是什么问题呢？就是“在安卓低版本，如果你在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中尝个鲜

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue # resource兼容性 # vue.js # 兼容性问题 # vue兼容性问题 # Vue2.0在IE11版本浏览器中的兼容性问题 # vue中引入mousewheel事件及兼容性处理方式 # 详解Vue Cli浏览器兼容性实践 # vue脚手架搭建项目的兼容性配置详解 # 如何去除vue项目中的#及其ie9兼容性 # Vue中引入使用 babel-polyfill 兼容低版本浏览器的方法 # Vue的兼容性解决方案Babel-polyfill案例解析 # 这个问题 # 很简单 # 链式 # 如何使用 # 都是 # 我就 # 也不 # 来了 # 是有 # 大家都 # 那就 # 上了 # 这就是 # 你在 # 只需 # 推荐使用 # 它是 # 我们可以 # 采用了 # 大功告成

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：豆包AI支持哪些文件格式豆包AI文件处理能力详细说明

下一篇：探究网站SEO优化费用的合理区间

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：豆包AI支持哪些文件格式豆包AI文件处理能力详细说明

下一篇：探究网站SEO优化费用的合理区间