vue-resource
代替ajax操作
在mian.js里面引入 import vueResource from 'vue-resource'
mian.js会 加载全局js
下面介绍的是基于Vue实例的方式,一般项目只需基于vue实例,项目中一般只使用post和get两种请求方式
1) post请求方法
this.$http.post(API.goodsProvideInfo, {}, { params: params }).then((res) => {
// 成功
}).catch(function (response) {
// 失败
console.log(response)
})
参数说明 1. url string (请求的url)
2.body Object (request body)(一般为空)
3.params Object (请求参数)
2) get
this.$http.get(API.goodsProvideInfo, {params: {sku: 1213}}).then((res) => {
}).catch(function (response) {
console.log(response)
})
参数说明 1. url string (请求的url)
2.params Object (请求参数)(post和get的传参数位置不同)
注:post和get传参方式不一样,post第二个参数是body,第三个是params,get 第二个参数是params
then--成功回调,catch--失败回调
注:共支持7种请求方式(了解)
get(url, [options])
post(url, [body], [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
put(url, [body], [options])
patch(url, [body], [options])
3)http 拦截
http拦截在mian.js做统一的拦截处理,有 加loading,处理返回错误,所以项目中的http请求不需要catch 方法,请求前可以对参数做统一处理,如加公共参数uid,中文encode,加密等。对请求完的数据 response做统一处理。
Vue.http.interceptors.push((request, next) => {
request.credentials = true // 这里解决跨域问题
// 请求发送前的处理逻辑
loading() // 加loading
next((response) => {
loadingHide() // 去掉loading
// 可以修改返回的response
if (response.data && response.data.code === '0') {
response.code = response.data.code
response.data = response.data.data
// 下面是统一的错误处理
} else if (response.data && response.data.code === 'TOKENINVALID_999') {
// 说明token过期,需要重新登录
window.location.href = '/login'
} else {
if (response.data && response.data.message) {
Notifiy('错误', response.data.message, 'error') // 弹出后台错误提示
} else if (response.data && response.data.code) {
response.code = response.data.code
} else {
Notifiy('错误', '请求出错', 'error')
response.code = '222222'
}
}
})
})
vue-resource的更多相关文章
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- Vue Resource root options not used?
I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does n ...
- vue -resource 文件提交提示process,或者拦截处理
this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...
- vue resource 携带cookie请求 vue cookie 跨域(六)
1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...
- vue resource patch方法的传递数据 form data 为 [object Object]
今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...
- Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
- vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
随机推荐
- 仿QQ大战—界面篇
之前在<仿QQ大战-服务器的搭建(ServerSocket)>中实现了服务器的搭建,以及一个简单地传递数据的实现,现在就是来实现类似与QQ聊天通信的功能.首先是界面的实现: 首先:服务器和 ...
- mysql主从复制操作步骤
注: .做主从复制的两台服务器server-id不能相同 .主从的字符集要一样,不然数据导入会报错 .开启db01的log-bin功能 [root@db01 mysql]# vim /etc/my.c ...
- SVD的几何意义,以及在去噪,推荐系统中的应用
很多文章说到奇异值分解的时候总是大概罗列下它的功能,并没有对功能及物理意义进行过多的阐述,现在我来对奇异值进行整理一下. 一 奇异值分解 对任意的矩阵A∈Fmn,rank(A)=r(矩阵的秩),总可以 ...
- 总结libevent安装方法
1.先用:ls -al /usr/lib | grep libevent 查看是否已安装,如果已安装且版本低于1.3,则先通过:rpm -e libevent -nodeps 进行卸载. 2.下载l ...
- 检查Linux服务器性能
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在? 概述通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. • uptime• ...
- BAYSY2 的LVDS引脚 笔记
差分引脚标号说明: 'L' 代表该引脚属于差分引脚 'xx' 两位整型数,在每一 bank 的独特标记 'y' 表示正向 还是 反向,同时要注意输入输出方向 ‘#’ 0~3,代表 bank0~bank ...
- MySQL练习-employees数据库(一)
安装一个数据库示例--employees 使用工具为Navicat--(ctrl + q: 打开新查询窗口 ctrl + r: 运行当前窗口内的所有语句) 参考http://www.cnblogs.c ...
- C程序汇编运行模式简析
SJTUBEAR 原创作品转载请注明出处 /<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 1. 汇编 ...
- 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币
题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...
- file_get_contents带bom
$dmText = file_get_contents( AROOT .'data' . DS . 'DMType.json.php'); if(preg_match('/^\xEF\xBB\xBF/ ...