vue-resource

Posted 2020-08-25 love星期六

代替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‘
}
}
})
})