过滤器内不能调用 uni.request 等异步接口，因其必须同步返回值，而异步请求无法阻塞模板渲染，导致静默失败、返回 undefined 或空白；正确做法是在生命周期中预加载数据，模板仅消费已就绪数据。
过滤器内不能调用接口——这不是写法问题，而是运行时机制禁止这么做。
为什么过滤器里写 uni.request 会静默失败
过滤器函数必须同步返回值，而 uni.request 是异步操作，根本无法在模板渲染阶段等待响应。你写的代码可能看起来“没报错”，但实际：
-
uni.request调用后立即返回undefined或空对象，过滤器拿不到数据就直接结束 - 控制台不会报错，但模板里显示为空、
null或原始值 - 小程序平台（如
mp-weixin）甚至不执行过滤器注册逻辑，整个过滤器链被编译器忽略
常见错误写法与真实表现
比如想在模板里写：{{ item.id | fetchUserName }}，然后在过滤器里发请求查用户名：
filters: {
fetchUserName(id) {
uni.request({ url: '/api/user/' + id, success: res => return res.data.name }) // ❌ 语法非法，return 写在回调里无效
}
}
这会导致：
- 过滤器函数本身没有
return，返回undefined -
success回调里的return只作用于回调函数，不影响外层过滤器 - H5 端可能看到
undefined，小程序端直接空白，且无任何提示
真正可行的替代路径
把“异步获取+模板展示”这个组合拆开，明确分工：
- 在
onLoad或onShow中批量请求关联数据，例如：先拉列表，再用item.userId批量查用户信息，合并后赋值给this.listWithNames - 用
computed封装映射关系，前提是用户数据已存在响应式对象中，例如：formattedItem() { return { ...this.rawItem, authorName: this.userMap[this.rawItem.userId] ?? '未知' } } - 对单条需按需加载的字段（如点击展开详情），改用
methods+ 按钮触发，而不是塞进模板表达式里
容易被忽略的关键点
很多人试图用 async/await 包一层过滤器，但 Vue 2/3 的过滤器都不支持 Promise 返回；即使强行 return await xxx()，模板渲染也不会等它。真正的异步边界必须划在数据层——接口调用只发生在生命周期或方法中，模板只负责消费已就绪的数据。
