UniApp 微信小程序:在 onLaunch 中等待异步方法执行完成后,再调用页面中的接口

最近遇到了一个问题:在 App.vue 中的 onLaunch 中调用登录接口时,由于异步登录尚未完成就调用了 index 页面的接口,导致 token 异常。如何确保页面在 App 中的 onLaunch 执行完毕后再继续执行呢? 在网上查阅了一些资料,发现大多数解决方案涉及登录状态设置、页面通过轮询或消息通知等方式等待状态,这些方法都不太理想。

解决方案:

要确保在App.vue中的onLaunch调用登录接口完成后再调用index的其他接口,可以使用 Promise 来控制异步操作的执行顺序

1、在App.vue中,使用Promise封装登录接口的调用,并在登录成功后返回一个resolve。

javascript 复制代码
export default {
  onLaunch() {
    // 封装登录接口为一个Promise
    const loginPromise = new Promise((resolve, reject) => {
      // 调用登录接口
      loginFunction().then(() => {
        // 登录成功时,执行 resolve
        resolve();
      }).catch((error) => {
        // 登录失败时,执行 reject
        reject(error);
      });
    });

    // 将 loginPromise 作为一个全局变量
    this.globalData.loginPromise = loginPromise; 
  }
}

2、在index页面中,在页面加载时,通过调用登录接口的Promise,等待登录接口成功后再调用其他接口。

javascript 复制代码
export default {
  onLoad() {
    // 获取 App 实例
    const appInstance = getApp();

    // 等待登录接口的Promise完成后,再调用其他接口
    appInstance.globalData.loginPromise.then(() => {
      // 调用 index 页面的接口
      getIndexInfo().then((res) => {
        // 处理其他接口的结果
      }).catch((error) => {
        // 错误处理
      });
    }).catch((error) => {
      // 登录失败处理
    });
  }
}

测试通过完工 ~

可能有同学会有疑问,每次获取loginPromise的时候会不会每次都登录?

答案是不会的,App.vue 中的 loginPromise 是在 onLaunch 生命周期钩子中创建的 Promise 对象,该 Promise 对象只会在应用初始化时调用一次登录接口,并在登录成功后 resolve。之后,其他页面获取 loginPromise 时并不会触发再次登录,而是直接返回之前创建好的 Promise 对象。

这意味着,每次获取 loginPromise 时不会导致重复登录,而是仅返回之前创建好的 Promise 对象。这种方式确保了登录操作只会在应用启动时执行一次,避免了重复登录

相关推荐
说私域1 小时前
基于开源技术体系的品牌赛道力重构:AI智能名片与S2B2C商城小程序源码驱动的品类创新机制研究
人工智能·小程序·重构·开源·零售
王哈哈的学习笔记2 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk2 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗4 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报4 小时前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
前端太佬6 小时前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
说私域7 小时前
颠覆传统微商!开源AI智能名片链动2+1模式S2B2C商城小程序:重构社交电商的“降维打击”革命
人工智能·小程序·开源·零售
七七小报8 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
ai大佬8 小时前
我是如何用AI编程制作一个AI表情包生成的小程序
人工智能·小程序·ai编程·api中转·apikey
2401_890665869 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制
java·python·微信小程序·html·php·课程设计·android-studio