代码编写细节总结

1.图片处理，用于头像显示。

getAvatarUrl(avatar) {
  // 处理空值或非字符串情况
  if (!avatar || typeof avatar !== 'string') {
    return '/static/images/default-avatar.png'; // 返回默认头像
  }
  
  // 检查是否为完整URL（支持http/https和相对协议//）
  const isFullUrl = /^https?:///.test(avatar) || avatar.startsWith('//');
  
  return isFullUrl ? avatar : `${this.baseUrl}${avatar}`;
}

• 使用正则 /^https?:/// 更精准地匹配 http:// 或 https:// 开头的 URL。
• ${this.baseUrl}${avatar} 拼接完整图片路径。
• startsWith()用于判断当前字符串是否以指定的子字符串开头，返回一个布尔值（true 或 false）。

2.Promise.all（）

并行执行多个异步请求，而不是等待一个请求完成后再发起另一个。假设两个接口各自需要 1 秒响应时间，串行请求（先 A 后 B）总耗时约 2 秒，并行请求（A 和 B 同时发起）总耗时约 1 秒。适合多个无依赖关系的请求，接口数据相互独立，虽然请求是并行的，但返回的结果数组顺序与传入的请求数组顺序一致。

  try {
    // 并行请求数据
    const [commissionRes, logRes] = await Promise.all([
      //接口1
      teamSellerCommission().catch(err => {
        console.error("数据请求失败:", err);
        return { data: null }; // 返回默认结构
      }),
      //接口2
      teamSellerCommissionLog().catch(err => {
          console.error("数据请求失败:", err);
          return { data: [] }; // 返回默认结构
      })
]);

//数据处理
if (commissionRes.data) {
  const commissionData = commissionRes.data;
} else {
  this.error = "数据加载失败";
}

// 日志数据
this.list = logRes.data || [];

  } catch (err) {
    // 捕获未预料到的错误
    console.error("数据加载异常:", err);
    this.error = "数据加载失败，请稍后重试";
  } finally {
    this.loading = false;
  }
}

3.Promise.allSettled()

 try {
        // 等待所有请求完成
        const results = await Promise.allSettled([
          接口一,
          接口二
        ]);
    // 处理佣金请求结果
    const commissionResult = results[0];

if (commissionResult.status === "fulfilled") {
  //数据处理
} else {
  console.error("请求失败:", commissionResult.reason);
}

// 处理日志请求结果
const logResult = results[1];

if (logResult.status === "fulfilled") {
  this.list = logResult.value.data || [];
} else {
  console.error("日志请求失败:", logResult.reason);
  this.list = []; // 给个默认空数组
  if (!this.error) this.error = "日志数据加载失败";
}
   } catch (err) {
 console.error("处理异常:", err);
 this.error = "数据处理出错";
} finally {
  this.loading = false;
   }

4.空值处理

1.可选链 ?. 防止中间属性为 null/undefined 时报错

2.值合并 ?? 提供默认值

 const userName = user.info.name; //user.info 为 undefined，报错 
 
 const userName = user?.info?.name ?? "未知用户";