Axios在Vue.js的部分使用及它的特点
简介:
基于Promise的Http请求客户端,可以在浏览器和node.js中使用
使用场景:
结合vue.js实现发送请求,拦截请求,拦截相应的功能
特点:
1.基于Promise
2.拦截请求和响应
3.转换请求和响应的数据
4.在node.js中使用
安装:
npm install --save axios
import axios from ‘axios’
结合Vue.js的请求响应拦截器:
// 请求拦截
axios.interceptors.request.use(config => {
if (config.url.indexOf('/oauth/token?grant_type=password') != -1) {
config.headers['Authorization'] = 'Basic Y2xpOnNlYw=='
// config.headers['Content-Type'] = 'application/json;charset-UTF-8'
} else if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken() + ''
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use((res) => {
if (res.data.code !== '0') {
switch (res.data.code) {
case '401':
window.location.href = '/login'
break
case '403':
Notification.error({
title: '错误:403',
message: '访问拒绝'
})
break
case '404':
Notification.error({
title: '错误:404',
message: '找不到网络资源'
})
break
case '500':
Notification.error({
title: '错误:500',
message: res.data.error.errorMsg
})
break
}
}
return res.data
}, (err) => {
if (err.response) {
switch (err.response.status) {
case '401':
window.location.href = '/login'
break
case '403':
Notification.error({
title: '错误:403',
message: '访问拒绝'
})
break
case '404':
Notification.error({
title: '错误:404',
message: '找不到网络资源'
})
break
case '500':
Notification.error({
title: '错误:500',
message: '服务器出错'
})
break
}
}
return Promise.reject(err)
})
// 请求封装
export default function _axios (method, url, params) {
method = method.toUpperCase()
var options = {
method: method,
url: url,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}
if (method === 'POST' || method === 'PATCH' || method === 'PUT') {
if (params) {
options.data = params
}
return axios(options)
.then((res) => {
return res
}, (error) => {
return error
})
}
if (method === 'GET' || method === 'DELETE') {
if (params) {
options.params = params
}
return axios(options)
.then((res) => {
return res
}, (error) => {
return error
})
}
}