1.1?axios二次封裝
import axios from 'axios'
import router from '../router'
import {MessageBox, Message} from 'element-ui'
let loginUrl = '/login'
// 根據(jù)環(huán)境切換接口地址
axios.defaults.baseURL = process.env.VUE_APP_API
axios.defaults.headers = {'X-Requested-With': 'XMLHttpRequest'}
axios.defaults.timeout = 60000
// 請求攔截器
axios.interceptors.request.use(
? config => {
? ? if (router.history.current.path !== loginUrl) {
? ? ? let token = window.sessionStorage.getItem('token')
? ? ? if (token == null) {
? ? ? ? router.replace({path: loginUrl, query: {redirect: router.currentRoute.fullPath}})
? ? ? ? return false
? ? ? } else {
? ? ? ? config.headers['Authorization'] = 'JWT ' + token
? ? ? }
? ? }
? ? return config
? }, error => {
? ? Message.warning(error)
? ? return Promise.reject(error)
? })
緊接著的是響應(yīng)攔截器（即異常處理)
axios.interceptors.response.use(
? response => {
? ? return response.data
? }, error => {
? ? if (error.response !== undefined) {
? ? ? switch (error.response.status) {
? ? ? ? case 400:
? ? ? ? ? MessageBox.alert(error.response.data)
? ? ? ? ? break
? ? ? ? case 401:
? ? ? ? ? if (window.sessionStorage.getItem('out') === null) {
? ? ? ? ? ? window.sessionStorage.setItem('out', 1)
? ? ? ? ? ? MessageBox.confirm('會話已失效! 請重新登錄', '提示', {confirmButtonText: '重新登錄', cancelButtonText: '取消', type: 'warning'}).then(() => {
? ? ? ? ? ? ? router.replace({path: loginUrl, query: {redirect: router.currentRoute.fullPath}})
? ? ? ? ? ? }).catch(action => {
? ? ? ? ? ? ? window.sessionStorage.clear()
? ? ? ? ? ? ? window.localStorage.clear()
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? break
? ? ? ? case 402:
? ? ? ? ? MessageBox.confirm('登陸超時(shí) 骚烧！', '提示', {confirmButtonText: '重新登錄', cancelButtonText: '取消', type: 'warning'}).then(() => {
? ? ? ? ? ? router.replace({path: loginUrl, query: {redirect: router.currentRoute.fullPath}})
? ? ? ? ? })
? ? ? ? ? break
? ? ? ? case 403:
? ? ? ? ? MessageBox.alert('沒有權(quán)限舔涎！')
? ? ? ? ? break
? ? ? ? // ...忽略
? ? ? ? default:
? ? ? ? ? MessageBox.alert(`連接錯(cuò)誤${error.response.status}`)
? ? }
? ? return Promise.resolve(error.response)
? }
? return Promise.resolve(error)
})
最后是導(dǎo)出基礎(chǔ)請求類型封裝琉挖。
export default {
? get (url, param) {
? ? if (param !== undefined) {
? ? ? Object.assign(param, {_t: (new Date()).getTime()})
? ? } else {
? ? ? param = {_t: (new Date()).getTime()}
? ? }
? ? return axios({method: 'get', url, params: param})
? },
? // 不常更新的數(shù)據(jù)用這個(gè)
? getData (url, param) {
? ? return axios({method: 'get', url, params: param})
? },
? post (url, param, config) {
? ? return axios.post(url, param, config)
? },
? put: axios.put,
? _delete: axios.delete
}
其中給get請求加上時(shí)間戳參數(shù)壳澳，避免從緩存中拿數(shù)據(jù)。 除了基礎(chǔ)請求類型寄摆，還有很多類似下載喇闸、上傳這種，需要特殊的的請求頭漾橙，此時(shí)可以根據(jù)自身需求進(jìn)行封裝杆融。
