如何利用 watchEffect 实现基于位置的实时天气更新？异步逻辑实战-Vue.js-PHP中文网

用 watcheffect 可自动追踪响应式地理位置变化并触发天气请求：通过 ref 存储经纬度，内部直接使用即自动依赖；配合 abortcontroller 避免请求冲突，用 loading/error/weather 状态反馈 ui；首次定位需单独调用 getcurrentposition。

如何利用 watcheffect 实现基于位置的实时天气更新？异步逻辑实战

用 watchEffect 实现基于位置的实时天气更新，核心在于：自动追踪地理位置变化，并在变化后触发异步天气请求，同时合理处理加载、错误和取消逻辑。它比手动监听 watch 更简洁，尤其适合“响应式副作用”场景。

watchEffect 会自动收集其内部访问的响应式数据依赖。只要把地理位置（比如 userLocation）当作响应式状态使用，它一变，天气请求就会自动重发：

定义一个 ref 或 computed 存储当前经纬度，例如：
const userLocation = ref({ lat: 0, lng: 0 })
在 watchEffect 内直接使用 userLocation.value，Vue 就会自动追踪它；
调用 fetchWeather(userLocation.value) 即可——无需手动写 watch 的回调和依赖数组。

用户位置可能频繁微调（如 GPS 晃动），导致请求堆积。需避免旧请求覆盖新结果或报错：

用 AbortController 主动中止上一次未完成的请求：
const controller = new AbortController()，并在发起 fetch 时传入 { signal: controller.signal }；
每次进入 watchEffect 时，先调用 controller.abort()（若存在旧控制器），再新建一个；
注意捕获 AbortError，避免它变成未处理异常（可用 if (err.name === 'AbortError') return 忽略）。

用户需要感知“正在获取”“获取失败”等状态，这些应作为响应式状态暴露给模板：

定义 const loading = ref(false)、const error = ref(null)、const weather = ref(null)；
在 watchEffect 开头设 loading.value = true，出错时赋值 error.value，成功后更新 weather.value 并清空 error；
模板中可直接用 v-if="loading">加载中...、v-else-if="error">{{ error.message }} 等做条件渲染。