vue中axios请求拦截、响应拦截的配置

 

1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 axios.js 文件，写入如下代码

 

import axios from 'axios'
import { base } from '../router/config'
import { config } from '../config'
import { Message, Modal } from 'iview'

let loading = null

// 设置基础apiUrl(和请求拦截中的 配置axios请求的url 的功能类似，建议使用下面的)
// axios.defaults.baseURL = 'https://www.apiopen.top/'

// 请求拦截 (这里以后写axios请求拦截)
axios.interceptors.request.use(
  conf => {
    // 配置全局http请求的加载动画
    if (!loading) {
      loading = Message.loading({
        content: 'Loading...',
        duration: 0
      })
    }

    // 配置axios请求的url  ${config.ajaxUrl} 是配置的请求url统一前缀，配置好就不用重复写一样的url前缀了，只写后面不同的就可以了
    conf.url = `${config.ajaxUrl}${conf.url}`
    // console.log(conf)

    // 判断是否存在token，如果存在的话，则每个http header都加上token
    if (sessionStorage.getItem('auth')) {
      // 配置请求头部
      conf.headers['Authorize'] = sessionStorage.getItem('auth')
    }
    return conf
  },
  err => {
    setTimeout(loading, 100)
    setTimeout(() => {
      loading = null
    }, 200)
    Message.error(err.response)
    // 抛出请求错误信息
    Promise.reject(err.response)
  }
)

// 响应拦截 (这里以后写axios响应拦截)
axios.interceptors.response.use(
  res => {
    setTimeout(loading, 100)
    setTimeout(() => {
      loading = null
    }, 200)
    // 获取响应的信息
    let meta = res.data.meta
    // 根据获取响应的信息的code的值 进行相对应的处理
    if (meta.code === '3') {
      Modal.warning({
        title: '友情提示',
        content: meta.msg,
        onOk: () => {
          window.location.href = `${base}login`
        }
      })
      return
    }
    // 根据获取响应的信息的code的值 进行相对应的处理
    if (meta.code !== '1') {
      Message.error(meta.msg ? meta.msg : '未知错误')
      return Promise.reject(res.data.meta)
    }
    return res.data.data
  },
  err => {
    setTimeout(loading, 100)
    setTimeout(() => {
      loading = null
    }, 200)
    // 抛出请求错误信息
    Promise.reject(err.response)
  }
)

export default {
  install: function (Vue) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios })
  }
}

1.在vue项目的 src/ 文件夹下新建 config.js 文件，写入如下代码

// 本地开发域名
const testDomain = 'https://www.apiopen.top'

// 线上正式服务器域名
const domain = '//gift.vipbcw.com'

// 线上测试服务器域名
// const domain = '//testgift.vipbcw.com'

// 配置版本号
const version = '1.1.4'

// 当前环境
const env = process.env.NODE_ENV
const origin = env === 'development' ? testDomain : domain

// config
const config = {
  // 判断项目环境，决定ajaxUrl 用哪个
  ajaxUrl: env === 'development' ? `${testDomain}` : `${domain}`,
  // 专门为excel接口设计的url判断
  excelPort: env === 'development' ? `${origin}/api` : `${origin}/back/api`
}

// 数据字典分类
const dicCode = {
  product: '1', // 商品分类
  greeting: '2', // 贺卡分类
  precut: '3', // 预制卡分类
  greetingRole: '4', // 贺卡角色
  help: '5', // 帮助分类
  express: '6' // 快递公司
}

export { config, dicCode, version }