前端之请求axios封装

使用前提：需要下载axios，vant

axios.js封装

//axios.js
import axios from 'axios';
import {Toast } from 'vant'; 

//添加请求拦截器
axios.interceptors.request.use(
  function(config) {
    //在发送请求之前做某事
       //携带token请求
      let token=localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
    }
    return config;
  },
  function(error) {
    //请求错误时做些事
    return Promise.reject(error);
  }
);

//添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    //对响应数据做些事
    return response;
  },
  function(error) {
    //请求错误时做些事
    return Promise.reject(error);
  }
);


export default function formMiddlePromise(url, params, method) {
   if(method){
    method= method.toUpperCase();
  }
    method="POST"
  
  console.log(url,method,params);
  Toast.loading({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    message: '加载中',
  });
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      timeout: 60000,
      data: params,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      transformRequest: [
        function(data, headers) {
          return data;
        }
      ],
    })
      .then(
        response => {
          Toast.clear();
          resolve(response.data);
        },
        err => {
          Toast.clear();
          if (err && err.response) {
            switch (err.response.status) {
              case 400:
                err.message = '请求错误';
                Toast('请求错误');
                break;

              case 401:
                err.message = '未授权，请登录';
                Toast('未授权，请登录');
                break;

              case 403:
                err.message = '拒绝访问';
                Toast('拒绝访问');
                break;

              case 404:
                err.message = `请求地址出错: ${err.response.config.url}`;
                Toast(`请求地址出错: ${err.response.config.url}`);
                break;

              case 408:
                err.message = '请求超时';
                Toast('请求超时');
                break;

              case 500:
                err.message = '服务器内部错误';
                Toast('服务器内部错误');
                break;

              case 501:
                err.message = '服务未实现';
                Toast('服务未实现');
                break;

              case 502:
                err.message = '网关错误';
                Toast('网关错误');
                break;

              case 503:
                err.message = '服务不可用';
                Toast('服务不可用');
                break;

              case 504:
                err.message = '网关超时';
                Toast('网关超时');
                break;

              case 505:
                err.message = 'HTTP版本不受支持';
                Toast('HTTP版本不受支持');
                break;

              default:
            }
          }else{
            Toast('服务器错误，请联系管理员！！！');
          }
          reject(err);
        }
      )
      .catch(thrown => {
        Toast(thrown);
      });
  });
}

// 返回数据统一修改成小写（预防后端数据大小写不一致需要多次改代码的情况）
function convertKeysToLowercase(data) {
  if (typeof data === 'object') {
    if (Array.isArray(data)) {
      return data.map(item => convertKeysToLowercase(item));
    } else {
      const convertedData = {};
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          const lowercaseKey = key.toLowerCase();
          convertedData[lowercaseKey] = convertKeysToLowercase(data[key]);
        }
      }
      return convertedData;
    }
  } else {
    return data;
  }
}

参数处理：

请求头设置：
   1 'Content-Type': 'application/json;charset=utf-8'
      let param={
        TaxNos:TaxNos
      }
     let res=await GetMySealByTaxNo(JSON.stringify(param))
   
   2 'Content-Type': 'application/x-www-form-urlencoded'
     let param={
       TaxNos:TaxNos
     }
     let res=await GetMySealByTaxNo(this.$qs.stringify(param)) 
     注意：需要下载qs并引入main.js 
           import qs from 'qs'
           Vue.prototype.$qs = qs

api.js 

import formMiddlePromise from './axios';

let base = '请求地址';
let base='/api' //跨域请求

//登录
export const GetLoginInfo= (params, method) => {
    return formMiddlePromise(`${base}GetMySealByTaxNo`, params, method);
  };

跨域处理：

   注意：此方法仅仅适用于开发环境中

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      '/api':{
        target:'请求地址',
        changeOrigin:true, //允许跨域
        pathRewrite:{ //重写
          '^/api':'' //将api替换为空
        }
      }
    }
  }
})

最新版本：

   axios

/*
 * @Author: 程序媛刘刘 
 * @Date: 2024-07-16 15:33:09
 * @LastEditors: 程序媛刘刘 3232024387@qq.com
 * @LastEditTime: 2024-07-22 15:55:35
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
 */
/* eslint-disable eqeqeq */
// axios.js
import axios from 'axios'
import { CryptoAESKey } from '@/utils/JSEncrypt'
import { MessageBox } from 'element-ui'
import store from '@/store'
import {showLoading,hideLoading } from '@/utils/load'


if(process.env.NODE_ENV !== 'test'){
    axios({
      method: 'get',
      url: window.location.pathname+'/config.json',
    }).then(res=>{
      console.log('读取配置',res);
      axios.defaults.baseURL = res.data.ServeUrl;
    })
}else{
  axios.defaults.baseURL= process.env.VUE_APP_ServeUrl
}


// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    // 请求错误时做些事
    showInfo('msgByAlert','提示',error.message)
    return Promise.reject(error)
  }
)

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 登录失效时使用
    //   if(response.code==''){
    //    router.replace(LOGIN_URL)
    //  }
    return response
  },
  function (error) {
    let message = ' '
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          message = '请求错误'
          break
        case 401:
          message = '未授权，请登录'
          break
        case 403:
          message = '拒绝访问'
          break
        case 404:
          message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          message = '请求超时'
          break
        case 500:
          message = '服务器内部错误'
          break
        case 501:
          message = '服务未实现'
          break
        case 502:
          message = '网关错误'
          break
        case 503:
          message = '服务不可用'
          break
        case 504:
          message = '网关超时'
          break
        case 505:
          message = 'HTTP版本不受支持'
          break
        default:
          message = '网络连接故障'
      }
      showInfo('msgByAlert','提示',message)
    } else {
      showInfo('msgByAlert','提示',error.message)
    }
    return Promise.reject(error)
  }
)
const that = this
// 防止多次ajax请求


	
/**
 * @description: 
 * @param {*} url 请求地址 string
 * @param {*} params 请求参数 object
 * @param {*} method 请求方法 string get,post(默认),delete
 * @param {*} header 请求头 object { contentType:'from（multipart/form-data）；json（application/json 默认）',
 *                                   Authorization:'', }
 * @param {*} setParam 请求参数处理 object { isEncry:true 全部使用(默认) params 仅请求参数使用 return 仅返回参数使用，
 *                                          isExtra：{额外新增参数} }
 * @param {*} setReturn 请求返回处理 object  { isLower: true 全部返回数据字母都改为小写， false 不修改 ，
                                              isUseError：true 使用返回的所有错误信息 ，false 只返回成功的数据}
 * @param {*} loadingText 请求时加载的文字内容 string
 * @return {*}
 */
export default function formMiddlePromise(url, params, method, header,setParam, setReturn,loadingText) {
showInfo('showLoading',loadingText)
  method = method.toUpperCase()||'POST'
  params = {
    ...params,
    ...setParam.isExtra
  }
  console.log( `Method:${method + '---------' + url},params:${JSON.stringify(params)}`)
 if (header.contentType == 'Form') {
    var param = new FormData()
    for (var key in params) {
      param.append(key, params[key])
    }
    params = param
  } else if(setParam.isEncry==true||setParam.isEncry=='params'){
    params = CryptoAESKey.encrypt(JSON.stringify(params))
  }else{
    params =JSON.stringify(params)
  }

  console.log( `Method:${method + '---------' + url},params:${JSON.stringify(params)}`)
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      data: params,
      headers: {
        'Content-Type': header.contentType == 'form' ? 'multipart/form-data' : 'application/json'
      },
      responseType: 'text',
    })
      .then(
        (response) => {
          var data
          if(setParam.isEncry==true||setParam.isEncry=='return'){
            data = CryptoAESKey.decrypt(response.data)
          }else if(setParam.isEncry=='params'){
            data = response.data
          }
          data = JSON.parse(data)
          if(setReturn.isLower) data=convertKeysToLowercase(data)
          console.log(url, data)
          showInfo('hideLoading')
          if (data.Code == '0' || data.Code == 0 || data.code == 0) {
            if (setReturn.isUseError) resolve(data)
            resolve(data.data)
          } else if (data.Code == '400' || data.Code == 400 || data.code == 400) {
           showInfo('msgByAlert','提示',data.msg)
           store.commit('user/LOGOUT')
          } else {
           showInfo('msgByAlert','提示',data.msg)
            if (setReturn.isUseError) resolve(data)
          }
        },
        (error) => {
          showInfo('hideLoading')
          reject(error)
        }
      )
      .catch((thrown) => {
        showInfo('hideLoading')
        console.log('thrown',thrown);
        showInfo('msgByAlert','提示',data.msg)
      })
  })
}

/**
 * @description: 
 * @param {*} type 展示名称 showLoading显示加载框  hideLoading关闭加载框  msgByAlert alert提示
 * @param {*} title 展示标题
 * @param {*} msg  展示内容
 * @return {*}
 */
function showInfo(type,title,msg){
  switch (type){
    case 'showLoading':
      showLoading(title)
    case 'hideLoading':
      hideLoading()
    case 'msgByAlert':
      MessageBox.alert(msg, title||'提示')
  }
}

function setParamInitJson(params) {
  var param = {}
  var where = {}
  var Filters = []
 for (var i in params) {
  if (i == 'page') {
    param['page'] = params[i]
  } else if (i == 'size') {
    param['size'] = params[i]
  } else if (i == 'token') {
    param['token'] = params[i]
  } else {
    Filters.push({
      Field: i,
      Operator: 'Equals',
      Value: params[i]
     })
  }
 }
 if (JSON.stringify(Filters) != '[]') {
  where['Filters'] = Filters
  where['Logic'] = 'Or'
  param['where'] = JSON.stringify(where)
 }
 return param
}

function convertKeysToLowercase(data) {
  if (typeof data === 'object') {
    if (Array.isArray(data)) {
      return data.map(item => convertKeysToLowercase(item));
    } else {
      const convertedData = {};
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          const lowercaseKey = key.toLowerCase();
          convertedData[lowercaseKey] = convertKeysToLowercase(data[key]);
        }
      }
      return convertedData;
    }
  } else {
    return data;
  }
}

api.js

import formMiddlePromise from './axios'
const base ='/api'

// 根据图片验证码发送短信  url, params, method, header,setparam, setreturn,loadingText
export const sendMsgByImg = (params) => {
  return formMiddlePromise(`${base}/common/send/sms`, params, '', {},{},{},'')
}