request.js学习

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import {Modal, notification} from 'ant-design-vue'
import { VueAxios } from '../boot/axios'
import { X_ACCESS_TOKEN,USER_NAME } from '@/store/mutation-types'

// 创建 axios 实例
const service = axios.create({
   baseURL: 'http://xxx/api',// baseURL: 'http://localhost:8072/api',
  timeout: 120000 // 请求超时时间
})

let error400Count = 0, error402Count = 0, errorDefaultCount = 0
const err = (error) => {
  try {
  
  if (error.request) {
    let that=this;
    let data = error.data;
    const token = Vue.ls.get(X_ACCESS_TOKEN)
    console.log("------异常响应------",token)
    console.log("------异常响应------",error.data.code)
    let path = window.location.href;
    
     let newurl=path.substring(0,path.lastIndexOf("token"))//过滤token
     let serviceUrl = encodeURIComponent(newurl)//加密地址
    switch (error.data.code) {

      case 403:
        notification.error({ message: '系统提示', description: '拒绝访问',duration: 4})
        break
      case 402:
        error402Count ++
        if(error402Count > 1){
          return
        }
        if(path.indexOf('/user/login') < 0){
          Modal.error({
            title: '登录已过期',
            content: '很抱歉，登录已过期，请重新登录',
            okText: '重新登录',
            mask: false,
            onOk: () => {
              store.dispatch('Logout').then(() => {
                Vue.ls.remove(X_ACCESS_TOKEN)
                try {
                  let path=that.$route.path;
                  if(path.indexOf('/user/login')==-1){
                    window.location.reload()

                  }
                  window.location.href = 'https://www.example.com';
                }catch (e) {
                  window.location.reload()
                }
              })
            }
          })
        }
        break
      case 400:
   
        error400Count ++
        if(error400Count > 1){
          return
        }
        if(path.indexOf('/user/login') < 0){
          notification.error({
            // title: '登录已过期',
            // content: '很抱歉，登录已过期，请重新登录',
            title: '其他设备登录',
            content: '很抱歉，您的账号已在其他电脑登录，请重新登录',
            okText: '重新登录',
            mask: false,
            onOk: () => {
              store.dispatch('Logout').then(() => {
                Vue.ls.remove(X_ACCESS_TOKEN)
                try {
                  let path=that.$route.path;
                  if(path.indexOf('/user/login')==-1){
                    window.location.reload()
                  }
                }catch (e) {
                  window.location.reload()
                }
              })
            }
          })
        }
        break
      case 404:
          notification.error({ message: '系统提示', description:'很抱歉，资源未找到!',duration: 4})
        break
      case 504:
        notification.error({ message: '系统提示', description: '网络超时'})
        break
      case 401:
        notification.error({
          message: '系统提示',
          description: '很抱歉，登录已过期，2s后将跳转登录页，请重新登录',
          
          duration: 4,
          key: '401'
        });
        setTimeout(() => {
          try {
             window.location.href = 'http://xx='+serviceUrl;
          } catch (e) {
            console.log(e);
           window.location.href = 'http://xx';
          }
        }, 2 * 1000);
        break 
        case 500: 
        notification.error({
          message: '系统提示',
          description: '很抱歉，登录已过期，2s后将跳转登录页，请重新登录',
          duration: 4,
          key: '500'
        });
        Vue.ls.remove(X_ACCESS_TOKEN);
        setTimeout(() => {
          try {
           window.location.href = 'http://xxxx='+serviceUrl;
          } catch (e) {
            console.log(e);
            window.location.href = 'http://xx';
          }
        }, 2 * 1000);
        break
      default:
        debugger
        errorDefaultCount ++
        if(errorDefaultCount > 1){
          return
        }
        notification.error({
          message: '系统提示，访问接口错误，请刷新重试',
          description: data.message,
          duration: 4
        })
        break
    }
  }
  return Promise.reject(error) 
  } catch (error) {
    console.log(error);
 }
}

// request 拦截器 
// 可以自请求发送前对请求做一些处理 
// 比如统一加token，对请求参数统一加密
service.interceptors.request.use(config => { 
  const token = Vue.ls.get(X_ACCESS_TOKEN) 
  if (token) {
    config.headers['X-Access-Token'] =token;  
  }
  return config  
}, err)

// response 拦截器 
// 可以在接口响应后统一处理结果
service.interceptors.response.use((response) => {
    //状态、字符、文件等
  if(response.data.code!=200)
    {  
      err(response);
    }
  return response.data;
}, err)

const installer = {
  vm: {},
  install (Vue, router) {
    Vue.use(VueAxios, router, service)
  }
}

export {
  installer as VueAxios,
  service as axios
}