http.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import axios from 'axios'
  2. import { ElMessage } from 'element-plus'
  3. import { getSessionVar, clearSessionVar } from "@/utils/session";
  4. import { useRouter } from "vue-router"
  5. const router = useRouter();
  6. const NETWORK_ERROR = '网络错误,请稍后重试!'
  7. // 创建 axios 实例
  8. const http = axios.create({
  9. baseURL: '', // 设置基本 URL
  10. timeout: 60000, // 设置请求超时时间
  11. });
  12. // 请求拦截器
  13. http.interceptors.request.use(
  14. (config) => {
  15. // 在发送请求之前做些什么
  16. // console.log('请求被拦截:', config);
  17. // 例如:添加 token 到请求头
  18. // config.headers['Authorization'] = 'Bearer your_token_here';
  19. if (getSessionVar('session_id') != null && getSessionVar('username') != null) {
  20. config.headers.Authorization = 'Beaver ' + getSessionVar('username') + ' ' + getSessionVar('session_id');
  21. }
  22. return config; // 必须返回 config,否则请求不会被发送
  23. },
  24. (error) => {
  25. // 请求错误时做些什么
  26. ElMessage({
  27. message: "请求错误:" + error,
  28. type: "warning"
  29. })
  30. console.log('请求错误:', error);
  31. return Promise.reject(error); // 必须返回一个 rejected promise 否则请求会卡住
  32. }
  33. );
  34. // 响应拦截器
  35. http.interceptors.response.use(
  36. (response) => {
  37. // 对响应数据做些什么,可以在此处理响应数据
  38. const { data, code, message } = response.data
  39. if (code === 200) {
  40. return data || response.data
  41. } else {
  42. ElMessage({
  43. message: message,
  44. type: "error"
  45. })
  46. return Promise.reject(message)
  47. }
  48. // return response.data; // 这里直接返回 response.data,方便后续使用
  49. },
  50. (error) => {
  51. // 处理未登录
  52. if (error.response.status == 401) {
  53. clearSessionVar()
  54. router.push("/login")
  55. return null
  56. }
  57. // 响应错误时做些什么,根据错误类型做相应处理
  58. if (error.response) {
  59. // 请求已发出,服务器响应了状态码,但状态码超出了 2xx 的范围
  60. ElMessage({
  61. message: NETWORK_ERROR,
  62. type: "warning",
  63. plain: true,
  64. })
  65. } else if (error.request) {
  66. // 请求已经发出,但没有收到响应
  67. ElMessage({
  68. message: "没有收到响应",
  69. type: "warning"
  70. })
  71. } else if (error.code === 'ECONNABORTED') {
  72. ElMessage({
  73. message: "请求超时,请稍后重试!",
  74. type: "warning"
  75. })
  76. }
  77. else {
  78. // 其他错误
  79. ElMessage({
  80. message: error.message,
  81. type: "warning"
  82. })
  83. }
  84. console.log('请求错误:', error.message);
  85. return Promise.reject(error); // 继续抛出错误
  86. }
  87. );
  88. export default http;