request.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import axios from 'axios'
  2. import { Message } from 'element-ui'
  3. import store from '@/store'
  4. import { getToken } from '@/utils/auth'
  5. import { Loading } from 'element-ui'
  6. let loading //定义loading变量
  7. function startLoading () { //使用Element loading-start 方法
  8. loading = Loading.service({
  9. lock: true,
  10. text: '加载中……',
  11. background: 'rgba(0, 0, 0, 0.7)'
  12. })
  13. }
  14. function endLoading () {
  15. //使用Element loading-close 方法
  16. loading.close();
  17. }
  18. //那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
  19. //声明一个变量 needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
  20. //调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。
  21. let needLoadingRequestCount = 0
  22. function showFullScreenLoading () {
  23. if (needLoadingRequestCount === 0) {
  24. startLoading()
  25. }
  26. needLoadingRequestCount++
  27. }
  28. function tryHideFullScreenLoading () {
  29. if (needLoadingRequestCount <= 0) return
  30. needLoadingRequestCount--
  31. if (needLoadingRequestCount === 0) {
  32. endLoading();
  33. }
  34. }
  35. // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  36. // create an axios instance
  37. const service = axios.create({
  38. baseURL: '', // url = base url + request url
  39. // withCredentials: true, // send cookies when cross-domain requests
  40. timeout: 5000 // request timeout
  41. })
  42. // { fullscreen: true, text: '努力加载中', spinner: 'el-icon-loading' }
  43. // request interceptor
  44. service.interceptors.request.use(
  45. config => {
  46. // do something before request is sent
  47. showFullScreenLoading()
  48. if (store.getters.token) {
  49. // let each request carry token
  50. // ['X-Token'] is a custom headers key
  51. // please modify it according to the actual situation
  52. config.headers['Authorization'] = getToken()
  53. // config.headers['content-type'] = "application/x-www-form-urlencoded"
  54. }
  55. return config
  56. },
  57. error => {
  58. // do something with request error
  59. // console.log(error) // for debug
  60. tryHideFullScreenLoading()
  61. return Promise.reject(error)
  62. }
  63. )
  64. // response interceptor
  65. service.interceptors.response.use(
  66. res => {
  67. //res.code !== 200
  68. if (res.data) {
  69. let data = JSON.parse(JSON.stringify(res.data))
  70. // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  71. if (data.code == 401 || data.code == 403) {
  72. this.$message({
  73. message: '登录超时请重新登录',
  74. type: 'warning'
  75. })
  76. tryHideFullScreenLoading()
  77. store.dispatch('user/resetToken').then(() => {
  78. location.reload()
  79. })
  80. }
  81. if (data.code != 200) {
  82. Message({
  83. message: data.msg || `请求失败code码为${data.code}`,
  84. type: 'error',
  85. duration: 5 * 1000
  86. })
  87. tryHideFullScreenLoading()
  88. return Promise.reject(new Error(data.msg || 'Error'))
  89. } else {
  90. tryHideFullScreenLoading()
  91. return data
  92. }
  93. } else {
  94. tryHideFullScreenLoading()
  95. return Promise.reject()
  96. }
  97. },
  98. error => {
  99. // console.log('err' + error) // for debug
  100. Message({
  101. message: error.message,
  102. type: 'error',
  103. duration: 5 * 1000
  104. })
  105. tryHideFullScreenLoading()
  106. return Promise.reject(error)
  107. }
  108. )
  109. export default service