vue-resource 和axios 异步请求插件
vue-resource npm安装
$ npm install vue-resource --save
请求方式
- get(url, [config])
- head(url, [config])
- delete(url, [config])
- jsonp(url, [config])
- post(url, [body], [config])
- put(url, [body], [config])
- patch(url, [body], [config])
config配置
参数 | 类型 | 描述 |
---|---|---|
url | string | 请求的url |
method | string | 请求的HTTP方法,GET,POST等 |
body | Object,FormaData,String | request body |
headers | Object | request header |
params | Object | 请求的url参数对象 |
responseType | string | 响应主体的类型(例如,文本,blob,json,...) |
timeout | number | 单位为毫秒的请求超时时间(0表示五超时时间) |
credentials | boolean | 表示跨域请求时是否需要凭证 |
emulateHTTP | boolean | 使用HTTP POST发送PUT,PATCH和DELETE请求并设置X-HTTP-Method-Override标头 |
emulateJSON | boolean | 发送请求正文作为application/x-www-form-urlencoded内容类型 |
before | function(request) | 回调函数在发送请求对象之前对其进行修改 |
uploadProgress | function(event) | 回调函数来处理上载的ProgressEvent |
downloadProgress | function(event) | 回调函数来处理下载的ProgressEvent |
全局拦截器 interceptors
Vue.http.interceptors.push((request, next) => {
// 请求发送前的处理逻辑
// modify method
request.method = 'POST';
// modify headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN');
request.headers.set('Authorization', 'Bearer TOKEN');
next(response => {
// ...
// 请求发送后的处理逻辑
// ...
// 根据请求的状态,response参数会返回给successCallback或errorCallback
return response
})
});
使用
// vue-resource 挂载vue实例上,通过this.$http访问
this.$http.get(url,{
params: { // get传递参数,把参数拼接在url地址中
userId: '0001'
},
headers: {
token: 'jack'
}
// .....
}).then(data=> {.....}, err => {.......} )
this.$http.post(url, {
// post传递参数方式,将数据打包在request body中
userId: '0001',
usename: 'tom'
}, { // 第三个参数是请求配置信息
header: {token: 'abc'}
}
}).then(data=> {.....}, err => {.......} )
this.$http({
url: '....',
method: 'get'['post'],
params: {....}, get传递参数
data: {....}, post传递参数
// .....
}).then(data => {.....}, err => {.......})
axios npm安装
$ npm install axios --save
请求方式
- 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]])
请求config配置 更多配置信息查看
参数 | 类型 | 描述 |
---|---|---|
url | string | 请求的url地址 |
method | string | 请求使用的方式,GET,POST等 |
baseURL | string | 除非url地址是绝对的,否则baseURL将拼接到请求url地址之前 |
headers | Object | request header |
params | Object | 请求url的参数对象 |
data | string,Object,ArrayBuffer... | 请求正文发送的数据,仅适用post,put,patch方法 |
timeout | number | 超时时间 |
responseType | document,json,text... | 服务器将响应的数据类型,默认json |
response information | ||
data | Object | 服务器提供的响应数据 |
status | number | 是服务器响应中的HTTP状态代码 |
statusText | string | 服务器响应中的HTTP状态消息,ok等.... |
headers | Object | response header |
body | Object | 和data一样 |
bodyText | string | 字符串的数据 |
使用
axios 暴露全局接口,是window对象
// get
axios.get(url, {
params: {....},
headers: {....}
//....
})
.then(data => {...})
.catch(err => {...})
// post
axios.post(url, {
username: 'jack'
}, {
headers: {...}
})
.then(data => {...})
.catch(err => {...})
// axios(config)
axios({
url: '...',
method: 'post'['get'],
data: {...}, // post请求传递参数
params: {....}, // get请求传递参数
headers: {.....}
})
.then(data => {...})
.catch(err => {...})
// axios.all
axios.all
let request1 = axios.get('one.json')
let request2 = axios.get('two.json')
let request3 = axios.get('three.json')
axios.all([request1, request2, request3])
.then(axios.spread((one, two, three) => {
// 可以使用axios内置函数,替我们遍历并以参数返回相对应数据
console.log('one', one)
console.log('two', two)
console.log('three', three)
}))
axios 拦截器
// 请求前拦截
axios.interceptors.request.use(config => {
// request init.....
return config
}, err => {
console.log(err)
})
// 响应前拦截
axios.interceptors.response.use(config => {
return config
}, err => {
console.log(err)
})