1、axios封装
import axios from 'axios'
import store, { TOKEN_HEADER } from "../store" ;
import router from "../router" ;
import { reUrl, path} from './urls'
import qs from 'qs'
import {
MessageBox,
Loading
} from 'element-ui'
import message from "./message" ;
axios. defaults. baseURL = reUrl;
axios. defaults. headers[ 'Content-Type' ] = 'application/json'
axios. defaults. timeout = 3000 ;
axios. defaults. withCredentials = true ;
axios. interceptors. request. use (
config => {
if ( store. state. token !== null ) {
config. headers[ TOKEN_HEADER ] = store. state. token;
}
return config;
} ,
err => {
return Promise. reject ( err) ;
}
) ;
axios. interceptors. response. use (
res => {
if ( res. data. code === 102 ) {
store. commit ( 'delToken' ) ;
store. commit ( 'delUserInfo' ) ;
router. push ( path ( '/login.html' ) ) . then ( ) ;
} else if ( res. data. code === 500 || res. data. code === 403 ) {
message. alert ( { title: '错误' , msg: res. data. msg} ) ;
} else {
return res;
}
} ,
error => {
return Promise. reject ( error) ;
}
) ;
const request = ( object ) => {
let loading = null ;
if ( object. loading) {
loading = Loading. service ( {
lock: true ,
text: object. loading,
spinner: 'el-icon-loading' ,
background: 'rgba(0, 0, 0, 0.6)'
} ) ;
}
if ( ! object. timeout) {
object. timeout = 0 ;
}
axios ( {
method: object. method,
url: object. url,
data: object. data
} ) . then ( ( res ) => {
setTimeout ( ( ) => {
if ( object. loading) {
loading. close ( ) ;
}
if ( ! res) {
return ;
}
const data = res. data;
if ( data. code !== 403 && data. code !== 500 ) {
if ( isFunction ( object. success) ) {
object. success ( data) ;
}
}
} , object. timeout) ;
} ) . catch ( ( error ) => {
console. log ( error) ;
setTimeout ( ( ) => {
if ( object. loading) {
loading. close ( ) ;
}
if ( isFunction ( object. error) ) {
object. error ( error) ;
} else {
message. alert ( {
title: '错误' , msg: '请求出错'
} ) ;
}
} , object. timeout) ;
} ) ;
}
const isFunction = ( func ) => {
return func && typeof func == 'function'
}
const executeReq = ( object ) => {
if ( object. confirm) {
message. confirm ( {
msg: object. confirm,
func : ( ) => request ( object)
} ) ;
} else {
request ( object) ;
}
}
export default {
get ( { url, data, loading, timeout, confirm, success, error} ) {
const method = 'GET' ;
if ( data) {
data = qs. stringify ( JSON . parse ( JSON . stringify ( data) ) ) ;
url = url + "?" + data;
}
executeReq ( { method, url, data, loading, timeout, confirm, success, error} ) ;
} ,
post ( { url, data, loading, timeout, confirm, success, error} ) {
const method = 'POST' ;
executeReq ( { method, url, data, loading, timeout, confirm, success, error} ) ;
} ,
put ( { url, data, loading, timeout, confirm, success, error} ) {
const method = 'PUT' ;
executeReq ( { method, url, data, loading, timeout, confirm, success, error} ) ;
} ,
delete ( { url, data, loading, timeout, confirm, success, error} ) {
const method = 'DELETE' ;
executeReq ( { method, url, data, loading, timeout, confirm, success, error} ) ;
}
}
1.1、上述需要用到的 urls
export const feUrl = '/sake/qingjiu' ;
export const reUrl = 'http://192.168.101.68:9949/sake' ;
export const imgUrl = reUrl + '/img/' ;
export const path = ( path ) => {
return feUrl. concat ( path) ;
}
2、element-ui 的 message(消息提示)封装
import { MessageBox, Message} from 'element-ui'
const message = ( msg, type ) => {
Message ( {
showClose: true ,
message: msg,
type: type
} ) ;
}
const success = ( msg ) => {
message ( msg, 'success' ) ;
}
const info = ( msg ) => {
message ( msg, 'info' ) ;
}
const error = ( msg ) => {
message ( msg, 'error' ) ;
}
const warning = ( msg ) => {
message ( msg, 'warning' ) ;
}
const alert = ( { title, msg, okBtnText, func} ) => {
if ( ! title) {
title = '提示' ;
}
if ( ! msg) {
msg = '错误' ;
}
if ( ! okBtnText) {
okBtnText = '确定' ;
}
MessageBox. alert ( msg, title, {
confirmButtonText: okBtnText,
} ) . then ( func ? func : ( ) => { } )
}
const confirm = ( { title, msg, func, cFunc} ) => {
MessageBox. confirm ( msg, title ? title: '提示' , {
confirmButtonText: '确定' ,
cancelButtonText: '取消' ,
} ) . then ( func ? func : ( ) => { } ) . catch ( cFunc ? cFunc : ( ) => { } ) ;
}
export default {
success,
info,
error,
warning,
alert,
confirm,
}
2、element-plus 的 message(消息提示)封装
import { ElMessageBox, ElMessage} from 'element-plus'
const message = ( msg, type ) => {
ElMessage ( {
showClose: true ,
message: msg,
type: type
} ) ;
}
const success = ( msg ) => {
message ( msg, 'success' ) ;
}
const info = ( msg ) => {
message ( msg, 'info' ) ;
}
const error = ( msg ) => {
message ( msg, 'error' ) ;
}
const warning = ( msg ) => {
message ( msg, 'warning' ) ;
}
const alert = ( { title, msg, ok, okText} ) => {
if ( ! title) {
title = '提示' ;
}
if ( ! msg) {
msg = '错误' ;
}
if ( ! okText) {
okText = '确定' ;
}
ElMessageBox. alert ( msg, title, {
confirmButtonText: okText,
} ) . then ( ok ? ok : ( ) => { } ) ;
}
const confirm = ( { title, msg, ok, okText, cancel, cText} ) => {
ElMessageBox. confirm ( msg, title ? title: '提示' , {
confirmButtonText: okText ? okText: '确定' ,
cancelButtonText: cText ? cText: '取消' ,
} ) . then ( ok ? ok : ( ) => { } ) . catch ( cancel ? cancel : ( ) => { } ) ;
}
export default {
success,
info,
error,
warning,
alert,
confirm,
}