我们先讲vue-resource,vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:
- get( url, [options] )
- head( url, [options] )
- delete( url, [options] )
- jsonp( url, [options])
- post( url, [body], [options])
- put( url, [body], [options])
- patch( url, [body], [options])
参数 | 类型 | 描述 |
url | string | 请求的URL |
method | string | 请求的HTTP方法,例如:'GET'或其他HTTP方法 |
body | Object,FormDatastring | request body |
params | Object | 请求的URL参数对象 |
headers | Object | request header |
timeout | number | 单位为毫秒的请求超时时间(0表示无超时时间) |
before | function(request) | 请求发送前的处理函数,类似于jQuery的beforeSend函数 |
progress | function(event) | ProgressEvent回调处理函数 |
credientials | boolean | 表示跨域请求时是否需要凭证 |
emulateHTTP | boolean | 发送PUT,PATCH,DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override |
全局拦截器interceptors:
Vue.http.interceptors.push((request,next)=>{
//...
//请求发送前的处理逻辑
//...
next((response)=>{
//...
//请求发送后的处理逻辑
//...
//根据请求的状态,response参数会返回给sucessCallback或errorCallback
return response
})
})
get请求: post请求:
jsonp请求:
拦截器:
地址全局配置:
另一种配置方式:
http:function(){
this.$http({
url:"package.json",
method:"get",
params:{
userId:"101"
},
headers:{
token:"102"
},
timeout:5,
before: function(){
console.log("before init")
},
}).then(function(res){
this.msg=res.data;
})
}
接下来我们来看一下Axios的API:
- axios.request( config )
- axios.get( url, [config] )
- axios.delete( url, [config] )
- axios.head( url, [config])
- axios.options( url, [config])
- axios.post( url, [data], [config])
- axios.put( url, [data], [config])
- axios.patch( url, [data], [config])
get请求: post请求:
另一种配置方式:发送get请求就要在params里面定义,post就在data里面定义
Axios的全局拦截器配置: