
axios全局配置,请求拦截,响应拦截配置
������������ axios ������������������������ ������������������������������token���������get������������������ ������������������������������������������������������������ ��������������������������������� ������loading������������ ������token��������������� ���������������������������
发布日期: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.CancelTokenconst source = CancelToken.source()export const service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 1000})// ���������������������tokenvar 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
���������������������������������������������
���������������������������������������������������������������������������
-����������������������������������������������
{ "responseStatusCode": 200, "manageToken": { "refreshToken": true, "token": true }, "releaseToken": { "refreshToken": true }}
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2025年04月26日 11时41分04秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Coursera普林斯顿算法课第二次作业
2021-05-15
pip命令 failed to create process.
2021-05-15
做SMTP客户端遇报错:535 Error
2021-05-15
Python3的修改
2021-05-15
SQL基础学习(六)- MySQL的insert语句
2021-05-15
Python HTTP Content-Type常用对照表
2021-05-15
win10系统截图快捷键
2021-05-15
Pycharm学习(四)—— Pycharm的terminal介绍
2021-05-15
安装office报错:无法安装64位office,PC上找到了32位程序
2021-05-15
Robotframwork输出日志里中文显示乱码问题
2021-05-15
c++链表实现通讯录管理系统
2021-05-15
设计模式--单一职责原则的个人理解
2021-05-15
go语言学习--day3(函数)
2021-05-15
Linux kernel pwn --- CSAW2015 StringIPC
2021-05-15
2020 05 02 记录思考
2021-05-15
2020-05-31 py执行时超时控制
2021-05-15
关于hostent以及in_addr结构体
2021-05-15
加入epoll_wait之后的简化版本
2021-05-15