request.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import Vue from 'vue'
  2. import axios from 'axios'
  3. import store from '@/store'
  4. import notification from 'ant-design-vue/es/notification'
  5. import modal from 'ant-design-vue/es/modal'
  6. import { VueAxios } from './axios'
  7. // 创建 axios 实例
  8. const service = axios.create({
  9. baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  10. timeout: 6000000 // 请求超时时间
  11. })
  12. const err = (error) => {
  13. console.log(error, error.response.data,error.message,'error')
  14. const config = error.config
  15. // 网络连接出错
  16. if (error.message.indexOf('Network Error') >= 0) {
  17. notification.destroy()
  18. notification.error({
  19. message: '提示',
  20. description: '无网络连接,请检查网络是否连接正常'
  21. })
  22. store.commit('SET_loadingStatus', false)
  23. return Promise.reject(err)
  24. }
  25. // 业务错误提示
  26. if (error.response) {
  27. const status = error.response.status
  28. const resData = error.response.data
  29. console.log(resData)
  30. if ((status == 503 || status == 500 || status == 404)) {
  31. notification.destroy()
  32. if(resData instanceof Blob){
  33. resData.text().then(data => {
  34. const res = JSON.parse(data)
  35. notification.error({
  36. message: '提示',
  37. description: res.message
  38. })
  39. })
  40. }else{
  41. notification.error({
  42. message: '提示',
  43. description: resData.message
  44. })
  45. }
  46. }
  47. store.commit('SET_loadingStatus', false)
  48. return Promise.reject(err)
  49. }
  50. // 超时无法访问服务
  51. if (error.message.indexOf('timeout') >= 0) {
  52. notification.destroy()
  53. notification.error({
  54. message: '提示',
  55. description: '网络连接超时,正在重连...'
  56. })
  57. // If config does not exist or the retry option is not set, reject
  58. if (!config || !config.retry) return Promise.reject(err)
  59. // Set the variable for keeping track of the retry count
  60. config.__retryCount = Vue.ls.get(config.url + '__retryCount') || 0
  61. // Check if we've maxed out the total number of retries
  62. if (config.__retryCount >= config.retry) {
  63. Vue.ls.remove(config.url + '__retryCount')
  64. notification.destroy()
  65. notification.error({
  66. message: '提示',
  67. description: '网络重连失败,请检测网络连接是否正常'
  68. })
  69. store.commit('SET_loadingStatus', false)
  70. // Reject with the error
  71. return Promise.reject(err)
  72. }
  73. // Increase the retry count
  74. config.__retryCount += 1
  75. Vue.ls.set(config.url + '__retryCount', config.__retryCount)
  76. // Create new promise to handle exponential backoff
  77. config.url = config.url.replace('/api', '')
  78. const backoff = new Promise(function (resolve) {
  79. setTimeout(function () {
  80. resolve()
  81. }, config.retryDelay || 1)
  82. })
  83. // Return the promise in which recalls axios to retry the request
  84. return backoff.then(function () {
  85. return service(config)
  86. })
  87. }
  88. }
  89. // request interceptor
  90. service.interceptors.request.use(config => {
  91. const token = store.getters.token
  92. if (token) {
  93. config.headers['access-token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  94. }
  95. config.retry = 3
  96. config.retryDelay = 1000
  97. store.commit('SET_loadingStatus', true)
  98. return config
  99. }, err)
  100. // response interceptor
  101. service.interceptors.response.use((response) => {
  102. console.log(response, 'response.data.status')
  103. const et = sessionStorage.getItem('errorTips')
  104. if ((response.data.status == '1001' || response.data.status == '1099') && !et) {
  105. sessionStorage.setItem('errorTips', 1)
  106. modal.destroyAll()
  107. modal.error({
  108. title: '提示',
  109. content: response.data.message,
  110. onOk () {
  111. sessionStorage.setItem('errorTips', 0)
  112. store.dispatch('Logout').then(() => {
  113. window.location.reload()
  114. })
  115. }
  116. })
  117. }
  118. if ((response.data.status == '401' || response.data.status == '500') && window.location.pathname != '/user/login') {
  119. notification.destroy()
  120. notification.error({
  121. message: '提示',
  122. description: response.data.message
  123. })
  124. }
  125. if (response.data.status == '900' && window.location.pathname != '/user/login') {
  126. notification.destroy()
  127. notification.error({
  128. message: response.data.message,
  129. description: response.data.code
  130. })
  131. }
  132. store.commit('SET_loadingStatus', false)
  133. return response.data
  134. }, err)
  135. const installer = {
  136. vm: {},
  137. install (Vue) {
  138. Vue.use(VueAxios, service)
  139. }
  140. }
  141. export {
  142. installer as VueAxios,
  143. service as axios
  144. }