前端之请求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替换为空
        }
      }
    }
  }
})