代替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的更多相关文章

  1. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  2. 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 ...

  3. vue -resource 文件提交提示process,或者拦截处理

    this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...

  4. vue resource 携带cookie请求 vue cookie 跨域(六)

    1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...

  5. vue resource patch方法的传递数据 form data 为 [object Object]

    今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...

  6. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  7. Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...

  8. vue.js插件使用(01) vue-resource

    本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...

  9. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  10. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

随机推荐

  1. 学记:为spring boot写一个自动配置

    spring boot遵循"约定优于配置"的原则,使用annotation对一些常规的配置项做默认配置,减少或不使用xml配置,让你的项目快速运行起来.spring boot的神奇 ...

  2. IntelliJ运行下载的Servlet时报错 Error running Tomcat 8.5.8: Unable to open debugger port (127.0.0.1:49551): java.net.SocketException

    学习Java Servlet时,从Wrox上下载了示例代码,准备run/debug时发现以下错误: Error running Tomcat 8.5.8: Unable to open debugge ...

  3. Redis集群研究和实践(基于redis 3.0.5)

    前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的2.x的稳定版本是2.8.19,也是我们项目中普遍用到的版本. redis在年初发布了3.0. ...

  4. bzoj 2141: 排队

    2141: 排队 Time Limit: 4 Sec Memory Limit: 259 MB Description 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我, ...

  5. [Tip]重写PanGestureRecognizer

    目标 识别当前pan方向是指定方向 需要API 重写- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; 获取所在view ...

  6. Struts2深入学习:OGNL表达式原理

    今天看了ognl表达式,不是很理解,准备以后再回头复习: http://developer.51cto.com/art/201203/322509.htm#case1

  7. UnicodeEncodeError: 'ascii' codec can't encode characters in position 820-823: ordinal not in range(128)

    真是奇怪了,在itermi里 print(data) 就能直接运行,而在sublime里,就非得写成这样 print(data.encode('utf-8'))

  8. GridView利用PagerTemplate做分页显示设置上一页下一页转到下拉转页

    效果如图: 代码如下: aspx页: <asp:GridView ID="GridViewMain" runat="server" OnPageIndex ...

  9. SQL Sever无法打开链接对话框,未将对象引用设置到对象的实例。(AppIDPackage)

    前几天刚做完系统,先装的是SQL Sever2008,装完后还试了一下,OK~没问题,然后就继续装VS2012等一些软件.搞到很晚没有继续试试就睡了,第二天运行SSMS出问题了..(如图 1.0 所示 ...

  10. 当前Windows群集心跳阀值设置

    一.内容描述: WINDOWS群集之间通过心跳检测(HeartBeat)各个节点是否正常在线,微软称此检测为lookalive,检测通过UDP数据包中封装的RPC信息进行传送.默认情况下为每秒检测一次 ...