axios封装

 common.js:

import axios from 'axios'
import { message } from 'antd'
import { baseURL } from '../utils/config'
import qs from 'qs'
import { showLoading, hideLoading } from '../utils/tools'
let isCanShow = true
const service = axios.create()

service.defaults.baseURL = baseURL

service.interceptors.request.use(
  (config) => {
    //获取token并放置在请求头中
    const accessToken = localStorage.getItem('accessToken')
    if (accessToken)
      config.headers.Authorization =
        'Bearer ' + localStorage.getItem('accessToken')

    if (config.method === 'get') config.params = { ...config.data }
    // 请求接口时显示loading，接口响应后隐藏loading，如果有特殊情况不能满足需求的，例如同时请求了多个接口
    // 且接口响应时间有比较大的差异，loading的显示隐藏状态不能友好的展示，可以直接在业务代码或api层，把
    // isLoading设置为false，则不再使用拦截器控制loading的状态，自己在业务代码里手动控制loading的状态
    if (config.isLoading !== false) showLoading()
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
)

service.interceptors.response.use(
  (res) => {
    if (res.config.isLoading !== false) {
      hideLoading()
    }
    //code是node接口的状态码，state是java接口的状态码
    if (res.data.code === 200 || res.data.state === 1) {
      return res.data
    } else if (res.data.code === 400 || res.data.state === 0) {
      let msg = ''
      msg = res.data.message
      if (res.data && res.data.data) {
        msg += res.data.data.error_msg ? `:${res.data.data.error_msg} ` : ''
        msg += res.data.data.error_code ? res.data.data.error_code : ''
      }
      if (res.config.isShowMessage !== false) {
        message.warning(msg)
      }
      return res.data
    } else {
      return Promise.reject(res)
    }
  },
  (err) => {
    hideLoading()
    let { response } = err
    let { status } = response
    if (status === 401) {
      if (isCanShow) {
        message.warning('token失效,请重新登录!')
        isCanShow = false
      }
      setTimeout(() => {
        isCanShow = true
      }, 1000)
      
      if (document.location.href.includes('#/sale')) {
        window.reactRouter.replace({ pathname: '/sale/login' })
      } else {
        window.reactRouter.replace({ pathname: '/light/login' })
      }
      
    } else {
      message.warning(err && err.message)
    }
    return Promise.reject(err)
  }
)

export const common = async (config) => {
  if (config.contentType === 'application/x-www-form-urlencoded') {
    config.headers = { 'content-type': 'application/x-www-form-urlencoded' }
    config.data = qs.stringify(config.data)
  }
  let res = await service(config)
  return res
}

index.js:

import light from './lightApi'
import sale from './saleApi'
import dark from "./darkApi"

const Api = {
  light,
  sale,
  dark
}

export default Api

lightApi.js:

import urls from './urls'
import { common } from './common'

//common函数传递的参数添加 contentType: 'application/x-www-form-urlencoded' 即可改变post请求参数传递的格式
const Api = {

  //#region 公共接口）
  commonQueryAllOperation: (data) => common({ url: urls.light.commonQueryAllOperation, data, method: 'post' }),
  //#endregion

}

export default Api

lightUrls.js:

import { baseURL, nodeBaseURL } from '../utils/config'

const urls = {

  //#region 公共接口
  commonQueryAllOperation: "/abc",
  //#endregion  


}

export default urls

config.js:

const baseURL = {
  dev: '', // 使用反向代理解决跨域时，dev应为空字符串
  test: 'http://abc.cn',
  // 使用yarn build打包，所有接口使用这个url，需要服务器解决跨域
  prod: 'http://abc.cn'
}[process.env.REACT_APP_MODE]

const imageBaseUrl = {
  dev: 'http://abc/',
  test: 'http://abc/',
  prod: 'http://abc/',
}[process.env.REACT_APP_MODE]

const nodeBaseURL = {
  dev: '',
  test: 'https://efficacious-tiny-infinity.glitch.me',
  prod: 'https://efficacious-tiny-infinity.glitch.me',
}[process.env.REACT_APP_MODE]

export { baseURL, imageBaseUrl, nodeBaseURL }