后端数据null前端统一显示成空

在这里插入图片描述

在这里插入图片描述

handleNullValues方法在封装请求接口返回数据时统一处理

  // null 转 ''
      function handleNullValues(data) {
        // 使用递归处理多层嵌套的对象或数组
        function processItem(item) {
          if (Array.isArray(item)) {
            return item.map(processItem);
          } else if (typeof item === 'object' && item !== null) {
            return Object.keys(item).reduce((acc, key) => {
              acc[key] = processItem(item[key]);
              return acc;
            }, {});
          } else if (item === null) {
            return '';
          }
          return item;
        }

        return processItem(data);
      }

      // 假设response是从后端获取的数据
      const processedData = handleNullValues(res.data);

      resolve(processedData); // 返回实际数据部分

全部代码

// request.js
import config from '../config/baseUrl'

const showLoading = () => wx.showLoading({
  title: '加载中...'
});
const hideLoading = () => wx.hideLoading();

// 封装的请求函数
export function request(url, method = 'GET', data = {}) {
  let fullUrl = config.BASE_URL + url;

  return new Promise((resolve, reject) => {
    showLoading(); // 显示加载提示
    const token = wx.getStorageSync('token')
    wx.request({
      url: fullUrl,
      method: method,
      data: data,
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + token
        // 'Bearer '是一个常见的前缀,表示你使用的认证方案是Bearer Token,这是OAuth 2.0中常用的认证方式。如果你的API要求或允许不同的认证方案,那么前缀应做相应调整或省略。
      },
      success: (res) => {
        console.log(res);
        if (res.data.msg === 'success') {
          hideLoading(); // 请求成功后隐藏加载提示
          
          // null 转 ''
          function handleNullValues(data) {
            // 使用递归处理多层嵌套的对象或数组
            function processItem(item) {
              if (Array.isArray(item)) {
                return item.map(processItem);
              } else if (typeof item === 'object' && item !== null) {
                return Object.keys(item).reduce((acc, key) => {
                  acc[key] = processItem(item[key]);
                  return acc;
                }, {});
              } else if (item === null) {
                return '';
              }
              return item;
            }

            return processItem(data);
          }

          // 假设response是从后端获取的数据
          const processedData = handleNullValues(res.data);

          resolve(processedData); // 返回实际数据部分
        } else {
          hideLoading(); // 即便请求失败,也要隐藏加载提示

          // 错误提示 微信小程序showToast提示过长无法显示 none
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })

          reject(res.data.msg || '请求失败'); // 错误处理
        }
      },
      fail: (err) => {
        hideLoading(); // 失败时隐藏加载提示

        reject(err.errMsg || '网络请求失败');
      }
    });
  });
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值