TypeError: u.then 不是 Vue3+Vue router 中的函数

Question

控制台错误

TypeError: u.then is not a function
    at index-CyodobdF.js:26:14273
    at Object.runWithContext (index-CyodobdF.js:14:10931)
    at we (index-CyodobdF.js:26:19934)
    at index-CyodobdF.js:26:23018

索引-CyodobdF.js

function W(x, F, L) {
        Be(x);
        const k = ie.list();
        return k.length ? k.forEach(ee => ee(x, F, L)) : console.error(x), // here
        Promise.reject(x)
    }

使用“npm run dev”本地运行时工作正常，但使用nginx部署“npm run build”后，出现以下错误。按以下链接登录后，使用 router() 进行重定向操作期间发生错误。我尝试使用链接中的答案来解决它，但就我而言，它没有多大作用。你能检查一下我的路由器是否有问题吗？

还有，我觉得代码可能有问题，因为我们在不了解Vue3的情况下就贸然开发。

/路由器/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Marker from '@/assets/icon/filled/marker.svg'
import Book from '@/assets/icon/filled/book.svg'
import User from '@/assets/icon/filled/user.svg'
import CloseRec from '@/assets/icon/filled/close-rectangle.svg'
import Cookies from 'js-cookie'
import { logoutUser } from '@/lib/utils.js'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/auth',
            component: () => import('../views/Layouts/AuthLayout.jsx'),
            redirect: '/auth/login',
            children: [
                {
                    path: 'login',
                    component: () => import('@/views/pages/LoginView.jsx'),
                    meta: {}
                },
                {
                    path: 'join',
                    component: () => import('@/views/pages/JoinView.jsx'),
                    meta: {}
                }
            ]
        },
        {
            path: '/diary',
            component: () => import('../views/Layouts/MainLayout.jsx'),
            redirect: '/diary/list',
            children: [
                {
                    path: 'list',
                    component: () => import('@/views/pages/MyDiaryView.jsx'),
                    meta: {
                        is_show: true,
                        title: '내 일기',
                        icon: Book, 
                        requiresAuth: true
                    }
                },
                {
                    path: 'write',
                    component: () => import('@/views/pages/WriteView.jsx'),
                    meta: {
                        is_show: true,
                        title: '일기 쓰기',
                        icon: Marker, 
                        requiresAuth: true
                    }
                },
                {
                    path: 'detail/:id',
                    component: () => import('@/views/pages/DetailView.jsx'),
                    meta: {
                        is_show: false,
                        title: '내 일기',
                        icon: Book, 
                        requiresAuth: true
                    }
                }
            ]
        },
        {
            path: '/account',
            component: () => import('../views/Layouts/MainLayout.jsx'),
            children: [
                {
                    path: 'info',
                    component: () => import('@/views/pages/AccountInfoView.jsx'),
                    meta: {
                        is_show: true,
                        title: '내 정보',
                        icon: User, 
                        requiresAuth: true
                    }
                },
                {
                    path: 'logout',
                    component: () => import('@/views/pages/LogoutView.jsx'),
                    beforeEnter: async (to, from, next) => {
                        try {
                            await logoutUser() 
                            next('/auth/login')
                        } catch (error) {
                            console.error('로그아웃 중 에러 발생:', error)
                            next('/auth/login') 
                        }
                    },
                    meta: {
                        is_show: true,
                        title: '로그아웃',
                        icon: CloseRec,
                        requiresAuth: true
                    }
                }
            ]
        }
    ]
})


router.beforeEach((to, from, next) => {
    const isLoggedIn = !!Cookies.get('is_login')

    if (to.path === '/') {
        next(isLoggedIn ? '/diary/list' : '/auth/login')
    } else if (to.meta.requiresAuth && !isLoggedIn) {
        Cookies.remove('is_login')
        next('/auth/login')
    } else {
        next()
    }
})

export default router

Answer 1

您看到的错误 — TypeError: u.then is not a function — 可能会发生，因为需要进行异步操作（涉及 Promise），但该对象不是 Promise。当您使用不返回 Promise 的内容并且正在调用 .then 时，通常会发生这种情况。

在您的代码中，问题可能源自路由器设置中的 beforeEnter 导航防护。具体来说，当您调用 logoutUser() 时，您可能期望它返回一个承诺，但它可能没有正确执行，因此会出现错误。

您可以检查和更正以下内容： 确保 logoutUser 返回一个 Promise：函数 logoutUser() 应该返回一个 Promise，以便可以使用 wait 关键字。如果 logoutUser() 没有返回承诺，则等待将失败并导致您看到的错误。

检查 logoutUser() 是否确实返回了一个承诺。下面是它应该是什么样子的示例：

export const logoutUser = async () => {
// Example logout logic, such as removing cookies or clearing sessions
return new Promise((resolve, reject) => {
    // Simulating an async task, such as clearing cookies or an API call
    setTimeout(() => {
        resolve(); // Resolving the promise
    }, 1000);
});

};

如果 logoutUser 没有返回 Promise，您可以像上面的示例一样进行调整，以确保它异步解析。

检查beforeEnter Guard中的异步流程：在你的路由守卫（beforeEnter）中，确保仅在所有异步操作完成后才调用next()。如果 logoutUser() 没有返回 Promise，立即调用 next() 可能会导致意外结果。

如果您想正确处理异步错误，这里有一个更好的方法：

{
path: 'logout',
component: () => import('@/views/pages/LogoutView.jsx'),
beforeEnter: async (to, from, next) => {
    try {
        // Ensure logoutUser is a promise and is resolved correctly
        await logoutUser();
        next('/auth/login');
    } catch (error) {
        console.error('로그아웃 중 에러 발생:', error);
        next('/auth/login');
    }
},
meta: {
    is_show: true,
    title: '로그아웃',
    icon: CloseRec,
    requiresAuth: true
}

} 确保正确定义 logoutUser：如果 logoutUser 是与 cookie、localStorage 或 API 请求交互的函数，请确保其设计为返回承诺。有时，不直接与异步操作交互的函数（例如简单的 cookie 删除）可能不会返回 Promise，这可能会导致您看到的错误。

生产中的调试（Nginx 问题）：您提到该应用程序在开发中运行良好，但在使用 Nginx 部署后遇到此问题。这可能是由于以下原因造成的：

缓存：确保构建后没有缓存干扰最新代码。 捆绑包大小：检查构建过程或 Nginx 配置是否可能导致正确提供应用程序的问题（检查 Nginx 日志）。 生产中的 JavaScript 错误：通过检查浏览器开发工具中的网络和控制台日志，确保您的生产版本已正确生成。有时，生产包可能存在开发模式中不存在的问题。