request.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import axios from 'axios'
  2. import { MessageBox, Message } from 'element-ui'
  3. import store from '@/store'
  4. // create an axios instance
  5. const service = axios.create({
  6. baseURL: process.env.VUE_APP_BASE_API,
  7. withCredentials: true, // send cookies when cross-domain requests
  8. timeout: 10000 // request timeout
  9. })
  10. const CancelToken = axios.CancelToken
  11. let source = null
  12. function getCancelToken () {
  13. if (!source) {
  14. source = CancelToken.source()
  15. }
  16. return source.token
  17. }
  18. export function cancelRequest () {
  19. if (source) {
  20. source.cancel('abort')
  21. source = null
  22. }
  23. }
  24. // request interceptor
  25. service.interceptors.request.use(
  26. config => {
  27. // do something before request is sent
  28. if (store.getters.token) {
  29. config.headers['Authorization'] = `Bearer ${store.getters.token}`
  30. }
  31. if (!config.background) {
  32. config.cancelToken = getCancelToken()
  33. }
  34. return config
  35. },
  36. error => {
  37. console.log(error) // for debug
  38. // do something with request error
  39. return Promise.reject(error)
  40. }
  41. )
  42. // response interceptor
  43. service.interceptors.response.use(
  44. /**
  45. * If you want to get http information such as headers or status
  46. * Please return response => response
  47. */
  48. /**
  49. * Determine the request status by custom code
  50. * Here is just an example
  51. * You can also judge the status by HTTP Status Code
  52. */
  53. response => {
  54. const res = response.data || {}
  55. if (res.success) {
  56. return res
  57. }
  58. if (!response.config?.custom) {
  59. Message({
  60. type: 'error',
  61. message: res.errMessage || '请求异常'
  62. })
  63. }
  64. return Promise.reject(res)
  65. },
  66. error => {
  67. const isCancel = axios.isCancel(error)
  68. const { response, config } = error
  69. if (response) {
  70. const { status } = response
  71. if (status === 401) {
  72. // to re-login
  73. MessageBox.confirm(
  74. '登录状态已过期,请重新登录',
  75. '系统提示',
  76. {
  77. type: 'warning',
  78. confirmButtonText: '重新登录',
  79. center: true,
  80. showClose: false,
  81. showCancelButton: false,
  82. closeOnClickModal: false
  83. }
  84. ).then(() => {
  85. store.dispatch('user/resetToken').then(() => {
  86. location.reload()
  87. })
  88. })
  89. } else if (!config?.custom) {
  90. const { errMessage } = response.data
  91. Message({
  92. type: 'error',
  93. message: errMessage || '请求异常'
  94. })
  95. }
  96. return Promise.reject({ isCancel, ...response.data })
  97. }
  98. let { message } = error
  99. if (!config?.custom && !isCancel) {
  100. if (message) {
  101. if (/timeout/.test(message)) {
  102. message = '请求超时'
  103. }
  104. } else {
  105. message = '请求异常'
  106. }
  107. Message({
  108. type: 'error',
  109. message
  110. })
  111. }
  112. return Promise.reject({ errCode: -1, errMessage: message, isCancel })
  113. }
  114. )
  115. export default service