书写腾讯天气遇到的问题

腾讯天气中遇到的几个问题

一、axios拦截器的死循环困境

在对接天气的接口时，因为我采用jwt的身份验证，需要通过axios请求拦截器统一携带Token。最开始的逻辑是：拦截器里调用getToken函数获取JWT，然后每次请求（包括getToken自身发送的请求）都会触发拦截器。

结果就是，如果getToken是通过axios发送请求，就会陷入无限递归调用，拦截器→getToken→拦截器→getToken，最终请求失败。

解决方案

通过 create() 创建两个完全独立的 axios 实例，避免拦截器的重复拦截。

二、axios响应取值

后端返回的Token数据格式是{“token”: “xxx”}，但前端代码中获取token时，一直拿到undefined。检查后发现，是对axios响应结构理解错了。

axios的响应结构是{ data: 后端返回的内容, status: 200, … }，所以正确的取值应该是response.data.token，而不是直接取response.token

三、深拷贝的实现与应用

在腾讯天气的城市基本信息保存中，需要对复杂的天气数据对象进行拷贝，进行本地存储中数据的更新，避免拷贝引用。

深拷贝函数

深拷贝函数，能处理基本类型、数组和对象的深拷贝：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 处理数组
  if (obj instanceof Array) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepClone(obj[i]); // 递归拷贝子元素
    }
    return arrCopy;
  }
  // 处理对象
  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepClone(obj[key]); // 递归拷贝子对象
    }
  }
  return objCopy;
}

JSON方法实现深拷贝

如果数据中没有函数、正则等特殊类型，也可以用JSON.stringify和JSON.parse来快速实现深拷贝：

const original = { city: '广州', weather: { type: '晴', temp: 25 } };
const str = JSON.stringify(original);// 序列化丢失引用关系
const copy = JSON.parse(str);// 反序列化

四、数组操作的索引错误

在处理腾讯天气的城市关注列表时，需要根据城市id删除对应的关注项。最初用find方法来查找要删除的元素：

// 错误：find 返回的是匹配的元素对象，而不是索引
const theDeleteIndex = attentionCity.find(item => item.id === id);
attentionCity.splice(theDeleteIndex, 1);

结果就是删错位置，甚至删错元素，因为find方法返回的是第一个匹配的元素对象（比如{ id: '101210106', ... }），而不是索引（数字）。后续用splice(theIndex, 1)时，会把“元素对象”当成索引，导致搜索城市后的历史更新出错。

解决方案

用findIndex替代find（findIndex返回匹配元素的索引）：

const theDeleteIndex = attentionCity.findIndex(item => item.id === id);
if (theDeleteIndex !== -1) {
  attentionCity.splice(theDeleteIndex, 1);
  console.log('删除成功');
} else {
  console.log('未找到对应城市');
}