request.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. }
  54. return config
  55. },
  56. error => {
  57. // do something with request error
  58. // console.log(error) // for debug
  59. return Promise.reject(error)
  60. }
  61. )
  62. // response interceptor
  63. service.interceptors.response.use(
  64. res => {
  65. //res.code !== 200
  66. let data = JSON.parse(JSON.stringify(res.data))
  67. if (data.code != 200) {
  68. Message({
  69. message: data.msg || `请求失败code码为${res.code}`,
  70. type: 'error',
  71. duration: 5 * 1000
  72. })
  73. // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  74. if (res.code === 401 || res.code === 403) {
  75. this.$message({
  76. message: '登录超时请重新登录',
  77. type: 'warning'
  78. })
  79. store.dispatch('user/resetToken').then(() => {
  80. location.reload()
  81. })
  82. }
  83. tryHideFullScreenLoading()
  84. return Promise.reject(new Error(res.msg || 'Error'))
  85. } else {
  86. tryHideFullScreenLoading()
  87. return data
  88. }
  89. },
  90. error => {
  91. // console.log('err' + error) // for debug
  92. Message({
  93. message: error.message,
  94. type: 'error',
  95. duration: 5 * 1000
  96. })
  97. tryHideFullScreenLoading()
  98. return Promise.reject(error)
  99. }
  100. )
  101. export default service