前端 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
}