前端 vue axios封装+debug+error (包含文件上传加参) - 戴向天

大家好！我叫戴向天

QQ群：602504799

QQ:809002582

废话不多说，直接上代码↓↓↓

祝你前端开发愉快

import axios from 'axios' // 导入axios cmd安装  =>  淘宝镜像 ? cnpm install axios -S : npm install axios -S
import { backendPath, port, openDebug, ProjectName } from './base.js'

const maxRequest = 1 // 限制当前请求的错误次数
axios.defaults.headers.common['token'] = localStorage.getItem('token')

const headersConfig = () => { // 请求头配置
  return {
    // 这里就是配置一些请求的参数值
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
    'Access-Control-Allow-Origin': '*'
  }
}

const debugOrder = [] // 请求后台的记录

const debug = (params) => { // 请求后台的记录进行存储
  if (!openDebug) return false // 是否开始了记录存储
  // 如果有参数 就进行存储
  if (params) {
    debugOrder.push({
      ...params, // 请求的信息 以及回馈值
      headers: { // 请求头的信息
        ...headersConfig()
      },
      time: new Date().getTime() // 请求的时间
    })
  }
  return debugOrder // 返回所有的请求记录
}

axios.defaults.baseURL = '/' + ProjectName

axios.interceptors.response.use(function (response) {
  // 在接收响应做些什么，例如跳转到登录页
  if (typeof response.data === 'string') {
    const res = JSON.parse(response.data.replace(/'/g, '"'))
    response.data = res
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

/**
 GET请求
 */

async function requestByGet (url, params, num = 0) {
  if (!url) {
    return {
      code: 0,
      msg: 'haven\'t request url'
    }
  }
  let isRequestError = false // 是否请求失败
  let errorMsg = '' // 请求的错误信息

  let urlParams = '?'

  for (let i in params) {
    urlParams += `${i}=${params[i]}&`
  }
  urlParams = urlParams.substring(0, urlParams.length - 1)
  const result = await axios.get(`${backendPath + port}/${ProjectName}${url}${urlParams}`, {}, {
    headers: {
      ...headersConfig()
    }
  }).catch(error => {
    /** 当请求出现错误，就会执行 */
    isRequestError = !isRequestError
    errorMsg = error
  })

  if (isRequestError) { // 判断是否出现错误的请求
    // 判断错误次数是否在允许的范围内
    if (num < maxRequest) {
      const res = await requestByGet(url, params, num + 1)
      return res
    } else { // 超出了错误次数的范围内 将错误的信息进行返回出去
      return {
        code: 0,
        msg: errorMsg
      }
    }
  }

  debug({
    method: 'GET',
    url: `${backendPath}/${url}`,
    params,
    result
  })
  // console.log('get', result)
  return result // 返回最终的结果
}

/**
 POST请求
 */
async function requestByPost (url, params, num = 0) {
  if (!url) {
    return {
      code: 0,
      msg: 'haven\'t request url'
    }
  }

  let isRequestError = false // 是否请求失败
  let errorMsg = '' // 请求的错误信息

  // console.log('params', params)

  const urlParams = new URLSearchParams()

  for (let i in params) urlParams.append(i, params[i])

  const result = await axios({
    method: 'post',
    url: `${backendPath + port}/${ProjectName}${url}`,
    data: params
  }).catch(error => {
    /** 当请求出现错误，就会执行 */
    isRequestError = !isRequestError
    errorMsg = error
  })

  if (isRequestError) { // 判断是否出现错误的请求
    // 判断错误次数是否在允许的范围内
    if (num < maxRequest) {
      const res = await requestByPost(url, params, num + 1)
      return res
    } else { // 超出了错误次数的范围内 将错误的信息进行返回出去
      return {
        code: 0,
        msg: errorMsg
      }
    }
  }

  debug({
    method: 'POST',
    url: `${backendPath}/${url}`,
    params,
    result
  })

  return result // 返回最终的结果
}

async function requestUploadFiles (url, params, num = 0) {
  if (!url) {
    return {
      code: 0,
      msg: 'haven\'t request url'
    }
  }
  let isRequestError = false // 是否请求失败
  let errorMsg = '' // 请求的错误信息

  let formData = new FormData() // 创建form对象

  for (let i in params) {
    if (i === 'fils') {
      formData.append(i, params[i], params.file.name)
    } else {
      formData.append(i, params[i])
    }
  }
  const result = await axios.post(`${backendPath + port}/${ProjectName}${url}`, formData, {
    headers: {
      // ...headersConfig()
    }
  }
  ).catch(error => {
    /** 当请求出现错误，就会执行 */
    isRequestError = !isRequestError
    errorMsg = error
  })
  // console.log('requestUploadFiles = >result====>', result)
  if (isRequestError) { // 判断是否出现错误的请求
    // 判断错误次数是否在允许的范围内
    if (num < maxRequest) {
      const res = await requestUploadFiles(url, params, num + 1)
      return res
    } else { // 超出了错误次数的范围内 将错误的信息进行返回出去
      return {
        code: 0,
        msg: errorMsg
      }
    }
  }

  debug({
    method: 'POST',
    url: `${backendPath}/${url}`,
    params,
    result
  })

  return result
}

/** 最重要的一步 将方法导出 */
export {
  requestByGet, requestByPost, requestUploadFiles
}