axios封装。实现token自动刷新,统一异常处理
axios封装
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import errorCode from './errorCode'
import { getToken, getTokenCreatedTime} from '@/utils/auth'
const service = axios. create ( {
baseURL: process. env. VUE_APP_BASE_API ,
timeout: 1000 * 60
} )
let isRefreshing = false ;
function isOAverdue ( ) {
return getToken ( ) && Date. now ( ) - getTokenCreatedTime ( ) > 1000 * 60 * 60
}
let subscribers = [ ] ;
function addSubscriber ( callback) {
subscribers. push ( callback) ;
}
function onAccessTokenFetched ( newToken) {
subscribers. forEach ( ( callback) => {
callback ( newToken) ;
} ) ;
subscribers = [ ] ;
}
const whiteList = [ '/sys/refreshToken' ]
service. interceptors. request. use ( request => {
request. headers. token = getToken ( ) ;
if ( isOAverdue ( ) && ! whiteList. some ( item => request. url. includes ( item) ) ) {
if ( ! isRefreshing) {
isRefreshing = true ;
store. dispatch ( "user/refreshToken" ) . then ( ( ) => {
onAccessTokenFetched ( getToken ( ) )
} ) . finally ( ( ) => {
isRefreshing = false ;
} ) ;
}
const retryOriginalRequest = new Promise ( ( resolve, reject) => {
addSubscriber ( ( newToken) => {
request. headers. token = newToken;
resolve ( request)
} )
} )
return retryOriginalRequest
} else {
return request
}
} , error => {
return Promise. reject ( error)
} )
service. interceptors. response. use ( response => {
const status = Number ( response. status) || 200
const message = response. data. data || response. data. msg || errorCode[ status] || errorCode[ 'default' ]
if ( status !== 200 || response. data. code == 1 ) {
Message ( {
message: message,
type: 'error'
} )
return Promise. reject ( error)
}
return response
} ,
error => {
if ( error. response && error. response. status === 401 ) {
store. dispatch ( 'user/logOut' )
return ;
}
Message ( {
message: error. message,
type: 'error' ,
} )
return Promise. reject ( error)
}
)
export default service. request
export const get = function ( url, params) {
return new Promise ( ( resolve, reject) => {
service. get ( url, {
params
} ) . then ( res => {
resolve ( null , res. data) ;
} ) . catch ( e => {
resolve ( e. data, null )
} )
} )
}
export const post = function ( url, data) {
return new Promise ( ( resolve, reject) => {
service. post ( url, data) . then ( res => {
resolve ( null , res. data) ;
} ) . catch ( e => {
resolve ( e. data, null )
} )
} )
}
api 封装
import { get } from "../request"
export const getStudent = params => get ( '/student/list' , params) ;
接口调用
import { getStudent } from "../api/student"
created ( ) {
this . initStudent ( ) ;
} ,
methods: {
async initStudent ( ) {
const [ err, res] = await getStudent ( { class : '六年一班' } )
if ( err) {
return this . $message. error ( err)
}
if ( res) {
this . studentList = res. data;
}
}
}