Axios简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
详细信息可以查看axios文档。
安装Axios
npm install axios; // 安装axios
|
封装Axios
我在项目的src目录下，新建了一个request文件夹，当中建了文件http.js
引入
这里肯定是需要引入Axios的，但vue的引入根据需求，因为我的token是根据Vue.prototype.$keycloak全局设定获取的。
import axios from 'axios'
import Vue from 'vue'
|
创建示例+固定信息设置
let instance = axios.create({ timeout: 1000 * 12 })
instance.defaults.baseURL = process.env.VUE_APP_API_URL
|
请求拦截器
因为该项目使用的是keycloak作为审核登陆系统。所以这边的token是通过我在项目中全局设置的keycloak获取的token。
请求头内容，根据各自需要设置。
instance.interceptors.request.use(
config => {
const ip = localStorage.getItem('dh-ip')
const token = Vue.prototype.$keycloak.token
ip && (config.headers['X-Forwarded-For'] = ip)
token && (config.headers.Authorization = 'Bearer ' + token)
return config
},
error => Promise.error(error)
)
|
这里的&&的使用，如果不清楚什么意思的话，可以看看我之前写的逻辑运算符 && / || / !
响应拦截器
根据服务器返回状态码，判断请求是否报错。
这里写了一个根据状态码，采取不同操作的函数。
function errorHandle (status, other) {
switch (status) {
case 401:
localStorage.removeItem('dh-token')
localStorage.removeItem('dh-refresh-token')
window.location.reload()
break;
case 403:
console.log('权限不足')
break;
case 404:
console.log('请求的资源不存在');
break;
default:
console.log(other);
}
}
|
instance.interceptors.response.use(
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
error => {
console.log(error)
const { response } = error;
if (response) {
errorHandle(response.status, response.data.message)
return Promise.reject(response)
} else {
console.log('断网：' + error)
}
}
)
|
最后输出
代码
import axios from 'axios'
import Vue from 'vue'
function errorHandle (status, other) {
switch (status) {
case 401:
localStorage.removeItem('dh-token')
localStorage.removeItem('dh-refresh-token')
window.location.reload()
break;
case 403:
console.log('权限不足')
break;
case 404:
console.log('请求的资源不存在');
break;
default:
console.log(other);
}
}
let instance = axios.create({ timeout: 1000 * 12 })
instance.defaults.baseURL = process.env.VUE_APP_API_URL
instance.interceptors.request.use(
config => {
const ip = localStorage.getItem('dh-ip')
const token = Vue.prototype.$keycloak.token
ip && (config.headers['X-Forwarded-For'] = ip)
token && (config.headers.Authorization = 'Bearer ' + token)
return config
},
error => Promise.error(error)
)
instance.interceptors.response.use(
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
error => {
console.log(error)
const { response } = error;
if (response) {
errorHandle(response.status, response.data.message)
return Promise.reject(response)
} else {
console.log('断网：' + error)
}
}
)
export default instance
|
参考链接
掘金–vue中Axios的封装和API接口的管理
axios中文文档
写文不易，如需转载，请注明出处。
注意文章编写时间，一切以官方文档为主。
如果某处写的有问题，欢迎发邮件，一起交流讨论，共同进步。
