已经开发了几个vue项目,然后对 axios的封装 不断优化。现在我用起来也比较方便。
2019-04-05更新 把之前的更加优化了
主要特点:
- 超时处理
- 统一http状态码 处理
- 统一错误处理
- 鉴权等
页面构成
axios配置
需要 npm axios 和 store2
import store2 from 'store2'
const config = {
proxy:'/api', //代理配置
}
//axios基本配置
const api = axios.create({
timeout: 10000,
withCredentials:true
})
//请求开始拦截
api.interceptors.request.use(conf => {
//请求带token
conf.headers['Authorization'] = store2('accesstoken')
return conf
},
error => ({ status: 0, msg: error.message })
)
//请求返回拦截
api.interceptors.response.use(response => {
return Promise.resolve(response).then(checkCode)
},
error => {
checkStatus(error.response)
return Promise.reject(error)
}
)
// http状态码错误处理
const checkStatus = (res) => {
window.$pig.$vux.loading.hide()
switch (res.status)
{
case 401 :{ //登录过期
console.log('登录过期')
break;
}
default:
console.log('服务器存在异常', 'middle')
break;
}
}
// 后台自定义 code错误处理
const checkCode = (res) => {
if(res){
if(res.data.code === 0 || moreCodeFn(res)){ //code为0成功
return res
}else {
console.log(res.data.msg) //统一处理错误
return false
}
}else {
return false
}
}
//过滤 接口函数(这些接口可以自定义 错误处理)
const moreCodeFn = (res) =>{
let url = res.config.url; //当前URL
let urlArray = ['/auth/morecode/token','/social/morecode/join'];
for(let i=0;i<urlArray.length;i++){
if(url.indexOf(urlArray[i])>=0){
return true
}
}
return false
}
// 解析参数
const formatParams = (method = 'GET', params) => {
//headers配置
const headers = {
'Content-Type': 'application/json;charset=utf-8',
}
switch (method) {
case 'POST':
return {
headers,
method,
data:params
}
case 'PUT':
return {
headers,
method,
data:params
}
case 'DELETE':
return {
headers,
method,
}
case 'GET':
return {
headers,
method,
params
}
default:
return {
headers,
method,
params
}
}
}
export {api,formatParams,config}
api.js
import {api,formatParams,config} from '@/config/axios'
export function getActivityApi(params){
return api(Object.assign(formatParams('POST',params),{
url:`${config.proxy}/social/promotReward/list`
}))
}
页面引入使用
import {getActivityApi} from '@/api/api.js'
let params = {};
getUserinfoApi(params ).then(res =>{
if(res){
}
})