request.js

    1. import axios from 'axios'
    2. import { MessageBox, Message } from 'element-ui'
    3. import store from '@/store'
    4. import router from '@/router'
    5. import { removeStorage, throttle } from '@/utils/index'
    7. // create an axios instance
    8. const service = axios.create({
    9.   // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    10.   withCredentials: true, // send cookies when cross-domain requests
    11.   validateStatus: null,
    12.   timeout: 10000, // request timeout
    13.   // headers: {'Content-Type': 'application/json'}
    14. })
    16. // request interceptor
    17. service.interceptors.request.use(
    18.   config => {
    19.     return config
    20.   },
    21.   error => {
    22.     // do something with request error
    23.     console.log(error) // for debug
    24.     return Promise.reject(error)
    25.   }
    26. )
    27. var goLoginPageThrottle = throttle(() => {
    28.   console.log('goLoginPageThrottle')
    29.   MessageBox('登录状态已超时，请重新登录！', '提示', {
    30.     confirmButtonText: '确定',
    31.     center: true
    32.   }).then((action) => {
    33.     console.log(location)
    34.     removeStorage('USER_INFO')
    35.     router.push(`/login?redirect=${location.pathname + location.search}`)
    36.   }).catch(err => {
    37.     console.log('cancle', err)
    38.     removeStorage('USER_INFO')
    39.     router.push(`/login?redirect=${location.pathname + location.search}`)
    40.   })
    41. }, 2000)
    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.   */
    49.   /**
    50.    * Determine the request status by custom code
    51.    * Here is just an example
    52.    * You can also judge the status by HTTP Status Code
    53.    */
    54.   response => {
    55.     const res = response.data
    57.     // console.log('response', response)
    58.     // if the custom code is not 20000, it is judged as an error.
    59.     switch (response.status) {
    60.       case 200:
    61.         return res
    62.       case 401:
    63.         if (location.pathname === '/login') {
    64.           return Promise.reject(res)
    65.         } else {
    66.           // 加入缓冲,避免多次弹窗
    67.           goLoginPageThrottle()
    68.           // if (loginGoing === false) {
    69.           //   loginGoing = true
    71.           //   // router.push(`/login?redirect=${location.pathname + location.search}`)
    72.           //   // router.push(`/login`)
    73.           // } else {
    74.           //   console.log('loginGoing', loginGoing)
    75.           // }
    76.           return Promise.reject(res)
    77.         }
    78.       case 504:
    79.         Message({
    80.           message: res.message || '请求超时，请稍后再试',
    81.           type: 'error',
    82.           duration: 5 * 1000
    83.         })
    84.         return Promise.reject(res)
    85.       default:
    86.         Message({
    87.           message: res.message || '服务器开小差了，请稍后再试',
    88.           type: 'error',
    89.           duration: 5 * 1000
    90.         })
    91.         return Promise.reject(res)
    92.     }
    93.   },
    94.   error => {
    95.     console.log('err' + error) // for debug
    96.     Message({
    97.       message: error.message,
    98.       type: 'error',
    99.       duration: 5 * 1000
    100.     })
    101.     return Promise.reject(error)
    102.   }
    103. )
    105. /*
    106.  * @params {string} url 请求地址
    107.  * @params {object} resOpts 请求配置参数
    108.  */
    109. export const download = (url, resOpts = {}) => {
    110.   const { type = 'get', data = {}} = resOpts
    111.   const queryArgs = {
    112.     url,
    113.     method: type,
    114.     data,
    115.     responseType: 'blob',
    116.     headers: {
    117.       'Content-Type': 'application/json;charset=utf-8',
    118.       withCredentials: true,
    119.     },
    120.   }
    121.   // tips: 这里直接返回的是response整体!
    122.   return axios.request(queryArgs).catch(err => console.log(err))
    123. }
    125. export default service