前端处理请求存在空内容、首尾空格的情况

1.创建一个publicMethod.js

(1)删除请求体value为空的情况

export function removeEmptyParams(params) {
  for (var key in params) {
    if (
      params.hasOwnProperty(key) &&
      (params[key] === null || params[key] === undefined || params[key] === "")
    ) {
      delete params[key];
    }
  }
  return params;
}

(2)去掉首尾空格

export function isTrim(data) {
  // 首先需要判断当前的config中是否存在data值
  if (data && data instanceof Object) {
    for (const key in data) {
      if (Object.hasOwnProperty.call(data, key)) {
        // 在需要判断一下当前数据是否是数组
        if (Array.isArray(data[key])) {
          // 就将数组放进去
          data[key] = isTrim(data[key]);
        } else if (data[key] && data[key] instanceof Object) {
          // 如果对象里面套对象的话
          data[key] = isTrim(data[key]);
        } else if (
          data[key] &&
          Object.prototype.toString.call(data[key]) == "[object String]"
        ) {
          // 如果对象里面的数据是String的话那么就直接trim只对String进行操作
          data[key] = data[key].trim();
        }
      }
    }
    return data;
  }  else if (data && data instanceof Array) {
    // 如果是数组  那就forin一下  判断里面的数据类型
    for (const key in data) {
      if (Object.hasOwnProperty.call(data, key)) {
        if (
          (data && data instanceof Object) ||
          (data && data instanceof Array)
        ) {
          data[key] = isTrim(data[key]);
        }
      }
    }
    return data;
  }
}

2.使用步骤

在前端 request.js引入公共方法(写拦截器的js中)

import { isTrim, removeEmptyParams } from "@/utils/publicMethod.js";

调用方法

// http request 拦截器
service.interceptors.request.use(
  config => {
    if (!config.donNotShowLoading) {
      showLoading()
    }
    const userStore = useUserStore()
    // 去掉首尾空格
    if (config.params) {
      isTrim(config.params);
      removeEmptyParams(config.params);
    }
    if (config.data) {
      isTrim(config.data);
      removeEmptyParams(config.data);
    }
    config.headers = {
      'Content-Type': 'application/json',
      'x-token': userStore.token,
      'x-user-id': userStore.userInfo.ID,
      ...config.headers
    }
    return config
  },
  error => {
    let userStore = useUserStore()
    userStore.setToken("")
    closeLoading()
    ElMessage({
      showClose: true,
      message: error,
      type: 'error'
    })
    return error
  }
)

如图,没加方法之前

前端处理请求存在空内容、首尾空格的情况_第1张图片

加方法之后

前端处理请求存在空内容、首尾空格的情况_第2张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)