axios全局配置,请求拦截,响应拦截配置
发布日期:2021-05-14 14:31:49 浏览次数:16 分类:精选文章

本文共 7210 字,大约阅读时间需要 24 分钟。

axios���������������������������������������������������������������������axios������������������������������

axios������������

������������������������������������������������������axios������������������������������������������������������������������������������

import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL
// other axios������
})
// ���������������������
service.interceptors.request.use(config => {
// ������������������������������������������������������token
if (localStorage.getItem('token')) {
config.headers.common['token'] = localStorage.getItem('token')
}
return config
}, error => {
return Promise.reject(error)
})
// ���������������������
service.interceptors.response.use(response => {
if (response.status === 200) {
if (response.data.err_code === 0) {
return Promise.resolve(response)
}
// ������������err_code���������
switch (response.data.err_code) {
// ������������������������������������������������������������
// ������403 Forbidden
case 401:
MessageBox.alert('������������ token������', {confirmButtonText: '������������'})
break
// ������������������������������������������������
}
return Promise.reject(response)
}
}, error => {
if (error.response) {
// ���������������������������������������
}
return Promise.reject(error)
})

������������

��� main.js ������������������������

import {get, post, delete, put, service} from './assets/js/http.js'
Vue.prototype.$axios = service

������������

���������������������������������������

// get������
this.$axios.get('/api/test', {
params: {
page: 1,
pageSize: 10
}
}).then(res => {
console.log(res.data)
})
// post������
this.$axios.post('/api/test', {
name: 'test',
age: 20
}).then(res => {
console.log(res.data)
})
// put������
this.$axios.put('/api/test', {
id: 123,
name: 'newName'
})
// delete������
this.$axios.delete('/api/test', {
params: {
id: 123
}
})

http.js ������������

������������������������������������������������������������������������������(entities):

import axios from 'axios'
import QS from 'qs'
import {Message} from 'element-ui'
import {MessageBox} from 'element-ui'
import store from '@/store'
import {localStorageClear} from '@/assets/js/public.js'
const CancelToken = axios.CancelToken
const source = CancelToken.source()
export const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 1000
})
// ���������������������token
var loadRefreshToken = false
// ���������������������
service.interceptors.request.use(config => {
// ���token ���������������������
config.headers.common['token'] = localStorage.getItem('token')
// ���get������������������������������IE������
if (config.method === 'get') {
config.params = {
t: Date.parse(new Date()) / 1000,
...config.params
}
}
// ��������������� URL ������������
config.paramsSerializer = params => {
return QS.stringify(params, {
arrayFormat: 'repeat'
})
}
return config
}, error => {
store.commit('changeLoading', false)
return Promise.reject(error)
})
// ���������������������
service.interceptors.response.use(response => {
let err_text = ''
if (response.status === 200) {
if (response.data.err_code === 0) {
// ���������������������
if (loadRefreshToken) {
loadRefreshToken = false
localStorage.setItem('refreshToken', response.data.data.refreshToken)
localStorage.setItem('token', response.data.data.token)
setTimeout(() => {
location.reload()
}, 0)
}
return Promise.resolve(response)
} else {
// ���������������������
switch (response.data.err_code) {
// ������������������������������������������������������������
case 2118:
MessageBox.alert('������������������', {
confirmButtonText: '������',
type: 'warning',
showClose: false
})
break
case 401:
MessageBox.alert(response.data.msg || '���������', {
type: 'warning'
})
break
case 91004403:
// token������������
if (!loadRefreshToken) {
loadRefreshToken = true
service({
url: process.env.VUE_APP_BASE_URL + 'intelctrl-user/refreshToken',
method: 'get',
params: {
refreshToken: localStorage.getItem('refreshToken')
}
})
}
break
case 91014403:
// refreshToken������
console.log('refreshToken������')
break
default:
err_text = response.data.msg
}
}
return Promise.reject(response)
} else {
// ���200���������������
switch (response.status) {
case 400:
Message.error(response.data.message || '������������')
break
default:
Message.error('������������')
}
store.commit('changeLoading', false)
return Promise.reject(response)
}
}, error => {
// ������������������������������������
if (error.response) {
Message.closeAll()
switch (error.response.status) {
case 400:
Message.error(error.response.data.message || error.response.data.msg)
break
default:
Message.error('������������')
}
}
store.commit('changeLoading', false)
return Promise.reject(error)
})
// ���������������������������������������
export function get(url, params) {
return new Promise((resolve, reject) => {
service.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
console.log('http.js���������1:' + err.data)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
service.post(url, QS.stringify(params))
.then(res => {
resolve(res.data)
})
.catch(err => {
console.log('http.js���������2:' + err.data)
})
})
}
export function put(url, params) {
return new Promise((resolve, reject) => {
service.put(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
console.log('http.js���������3:' + err.data)
})
})
}
export function delete(url, params) {
return new Promise((resolve, reject) => {
service.delete(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
console.log('http.js���������4:' + err.data)
})
})
}
export default service

���������������������������������������������

  • ������������ axios ������������������������
  • ������������������������������token���������get������������������
  • ������������������������������������������������������������
  • ���������������������������������
  • ������loading������������
  • ������token���������������
  • ���������������������������
  • ���������������������������������������������������������������������������

    -����������������������������������������������

    {
    "responseStatusCode": 200,
    "manageToken": {
    "refreshToken": true,
    "token": true
    },
    "releaseToken": {
    "refreshToken": true
    }
    }
    上一篇:vue中 .env .env.develop .env.production .env.alpha详细说明
    下一篇:弄懂 JavaScript 执行机制event loop

    发表评论

    最新留言

    路过,博主的博客真漂亮。。
    [***.116.15.85]2025年04月26日 11时41分04秒