Uniapp使用onShow语法报before initialization

一、错误原因分析

函数未完成初始化时被调用

• 当你在 onShow 生命周期中调用 getUserMessagePlan() 时，如果该函数的定义位于调用代码的下方（如示例中的顺序），JavaScript 引擎会因 变量提升规则 抛出此错误。

• 示例代码结构：
javascript 复制代码
```
onShow(() => {
  getUserMessagePlan() // ❌ 调用发生在函数定义之前
})

const getUserMessagePlan = async () => { ... } // 函数定义在调用之后
```
uni-app 生命周期执行顺序的影响

• 在 uni-app 中，页面生命周期（如 onShow）的触发早于 Vue 组件的和mounted钩子。若函数定义依赖于组件初始化（如ref` 数据），可能导致时序冲突。

二、解决方案

方案一：调整函数声明顺序

将函数定义移至生命周期调用之前：

javascript 复制代码

// ✅ 先定义函数
const getUserMessagePlan = async () => { ... }

// ✅ 再调用
onShow(() => {
  getUserMessagePlan()
})

方案二：改用函数声明（非箭头函数）

JavaScript 的 函数声明（非表达式）会提升到作用域顶部，可避免此问题：

javascript 复制代码

onShow(() => {
  getUserMessagePlan() // ✅ 即使调用在前也不会报错
})

// ✅ 使用函数声明（非箭头函数）
async function getUserMessagePlan() { ... }

方案三：检查模块化引用

如果函数定义在另一个文件中，需确保正确导出和导入：

javascript 复制代码

// utils/message.js
export const getUserMessagePlan = async () => { ... }

// 页面中
import { getUserMessagePlan } from '@/utils/message'
onShow(() => {
  getUserMessagePlan()
})

三、扩展建议

生命周期执行顺序的验证

通过 console.log 确认函数是否在 onShow 触发前完成初始化：
javascript 复制代码
```
console.log('函数是否定义:', typeof getUserMessagePlan) // 应输出 "function"
onShow(() => { ... })
```

避免依赖未初始化的响应式数据

若函数中使用了 ref 或 reactive 数据，需确保它们在 onShow 调用前已初始化：

javascript 复制代码

const userMessageList = ref([]) // ✅ 在函数外定义响应式数据

const getUserMessagePlan = async () => {
  userMessageList.value = await fetchData() // 安全操作
}

异步操作的错误处理

添加 try/catch 防止未捕获的 Promise 异常（参考网页2的异步操作建议）：

javascript 复制代码

onShow(async () => {
  try {
    await getUserMessagePlan()
  } catch (err) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  }
})

四、总结

• 根本原因 ：函数调用发生在定义之前，违反 JavaScript 作用域规则。

• 关键点 ：通过调整代码顺序或改用函数声明，确保函数在调用时已初始化。

• 最佳实践 ：结合 uni-app 生命周期特性（如 onLoad 用于初始化，onShow 用于刷新）优化异步逻辑。