书写腾讯天气遇到的问题

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

一、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

三、深拷贝的实现与应用

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

深拷贝函数

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

javascript 复制代码
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.stringifyJSON.parse来快速实现深拷贝:

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

四、数组操作的索引错误

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

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

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

解决方案

findIndex替代findfindIndex返回匹配元素的索引):

javascript 复制代码
const theDeleteIndex = attentionCity.findIndex(item => item.id === id);
if (theDeleteIndex !== -1) {
  attentionCity.splice(theDeleteIndex, 1);
  console.log('删除成功');
} else {
  console.log('未找到对应城市');
}
相关推荐
xulihang8 小时前
如何在网页中嵌入PDF
前端·javascript·html
玖伍贰零壹肆8 小时前
前端偶尔需要—Vue3+Vuetify国际化
前端
张元清8 小时前
二分查找的艺术:`left <= right` 与 `left < right` 的终极抉择
前端·javascript·算法
蒋星熠8 小时前
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
前端·vue.js·人工智能·pytorch·深度学习·ai·typescript
狂炫一碗大米饭8 小时前
JavaScript 中 Fetch API 的完整指南
前端·api
coding随想8 小时前
还没用过就要被弃用了?深度解析浏览器中的App Cache缓存管理事件
前端
Flyfreelylss8 小时前
前端实现解析【导入】数据后调用批量处理接口
前端·reactjs
小彭努力中9 小时前
164.在 Vue3 中使用 OpenLayers 加载 Esri 地图(多种形式)
开发语言·前端·javascript·vue.js·arcgis
布里渊区9 小时前
前端页面性能优化
前端·性能优化