前端 vue axios封裝+debug+error - 戴向天

大家好！我叫戴向天

QQ羣：602504799

QQ:809002582

廢話不多說，直接上代碼↓↓↓

祝你前端開發愉快

import axios from 'axios'			//導入axios		 cmd安裝  =>  淘寶鏡像 ? cnpm install axios -S : npm install axios -S


const backendPath = 'http://127.0.0.1',		//後臺請求地址

  port = ':8080',

  maxRequest = 3,		//限制當前請求的錯誤次數

  headersConfig = () => {			//請求頭配置
    return {
      // 這裏就是配置一些請求的參數值
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  },
  openDebug = false,			//是否開始debug
  debugOrder = [],			//請求後臺的記錄

  debug = (params) => {		//請求後臺的記錄進行存儲

    if (!openDebug) return false		//是否開始了記錄存儲
    // 如果有參數 就進行存儲
    if (params) {
      debugOrder.push({
        ...params,		//請求的信息 以及回饋值
        headers: {		//請求頭的信息
          ...headersConfig(),
        },
        time: new Date().getTime(),		//請求的時間
      })
    }

    return debugOrder  //返回所有的請求記錄
  }

/**
 GET請求
 */

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

  const urlParams = new URLSearchParams()

  for (let i in params) urlParams.append(i, params[i])
  const result = await axios.get(`${backendPath + port}${url}`, urlParams, {
    headers: {
      ...headersConfig(),
    }
  }).catch(error => {
    /** 當請求出現錯誤，就會執行 */
    isRequestError = !isRequestError
    errorMsg = error
  })

  if (isRequestError) {			// 判斷是否出現錯誤的請求
    // 判斷錯誤次數是否在允許的範圍內
    if (num < maxRequest) {
      return await requestByGet(url, params, num + 1)
    } else {	// 超出了錯誤次數的範圍內 將錯誤的信息進行返回出去
      return {
        code: 0,
        msg: errorMsg,
      }
    }
  }

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

  return result			// 返回最終的結果
}

/**
 POST請求
 */

async function requestByPost (url, params, num = 0) {

  if (!url) {
    return {
      code: 0,
      msg: 'haven\'t request url'
    }
  }

  let isRequestError = false,		// 是否請求失敗
    errorMsg = ''					//請求的錯誤信息

  console.log('params', params)

  const urlParams = new URLSearchParams()

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

  const result = await axios.post(`${backendPath + port}${url}`, urlParams, {
      headers: {
        ...headersConfig(),
      }
    }
  ).then(res=>{
    console.log("res",res)
  }).catch(error => {
    /** 當請求出現錯誤，就會執行 */
    isRequestError = !isRequestError
    errorMsg = error
  })

  if (isRequestError) {			// 判斷是否出現錯誤的請求
    // 判斷錯誤次數是否在允許的範圍內
    if (num < maxRequest) {
      return await requestByPost(url, params, num + 1)
    } else {	// 超出了錯誤次數的範圍內 將錯誤的信息進行返回出去
      return {
        code: 0,
        msg: errorMsg,
      }
    }
  }

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

  return result			// 返回最終的結果
}

/** 最重要的一步 將方法導出*/
export {
  requestByGet, requestByPost
}