navigateTo doesn't work in usefetch

[2536629322]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.16.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@9.5.1
• Builder: -
• User Config: devtools, ssr, nitro, app, modules, vite, css, elementPlus, plugins
• Runtime Modules: @element-plus/nuxt@1.0.9, @pinia/nuxt@0.4.11
• Build Modules: -

---

Reproduction

export const BASE_URL = process.env.BASE_URL;
import { getToken, delToken } from "#imports";

const request = () => {

const http = async (url, method, data = null, params = {}, options = {}) => {
    const token = getToken();
    const app = useNuxtApp()
    const loginInvalid = () => {
        app.runWithContext(() => {
            navigateTo('/login', { replace: true })
        })
    }
    const preOptions = {
        baseURL: BASE_URL,
        method: method,
        headers: {
            Authorization: 'Bearer ' + token,
            'Content-Type': method !== 'get' ? 'application/json' : undefined,
        },
        body: method !== 'get' ? JSON.stringify(data) : undefined,
        params: params,
        ...options,
    };


    const { data: resData, error, response } = await useFetch(url, {
        ...preOptions,
        onRequest({ request, options }) {
            // 请求前的处理
        },
        onRequestError({ request, options, error }) {
            // 处理请求错误
        },
        onResponse({ request, response, options }) {
            // 处理响应数据
            if (response.status === 401) {
                loginInvalid()
            }
        },
        onResponseError({ request, response, options }) {
            // 处理响应错误
        },
    });


    return resData.value;



};

const get = (url, params = {}, options = {}) => {
    return http(url, 'get', null, params, options);
};

const post = (url, data, params = {}, options = {}) => {
    return http(url, 'post', data, params, options);
};

const put = (url, data, params = {}, options = {}) => {
    return http(url, 'put', data, params, options);
};

const del = (url, data, params = {}, options = {}) => {
    return http(url, 'delete', data, params, options);
};

return {
    get,
    post,
    put,
    delete: del
};

};

export default request();

Describe the bug

When usefetch carries the token request interface from cookies, if the returned status code is 401, I called loginInvalid(), but navigateTo did not take effect

Additional context

No response

Logs

No response

[danielroe]

useAsyncData or useFetch functions should not have side effects. They are not guaranteed to run. For example, we support payload extraction and running them at generate time.

You should also not use useFetch in order to perform a request. Instead just use $fetch directly.