Question

我正在尝试构建一个 React 应用程序并想调用这样的函数：

if (typeof window !== 'undefined') { var token = (await getItem('secure_token')); }
if (typeof window !== 'undefined') { var user_id = (await getItem('user_id')); }

我收到以下错误：

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

我怎样才能做到这一点。因为没有等待，我得到的是 [object Promise] 而不是实际值。

完整代码如下：

import axios from "axios";
import { getStorage } from "../../components/Helper";
const API_URL = "http://127.0.0.1:8000/api";
const BASE_API = "http://127.0.0.1:8000";
var token = null;
var user_id = null;
if (typeof window !== 'undefined') { var token = (await getItem('secure_token')); }
if (typeof window !== 'undefined') { var user_id = (await getItem('user_id')); }
export const API_ROUTE = axios.create({
    baseURL: API_URL,
    withCredentials: true,
    crossdomain: true,
    headers: {
        "Key": token,
        "Id": user_id
    }
});

export const csrf_token = async () => {
    await axios.get(BASE_API + '/sanctum/csrf-cookie');
}

async function getItem(item) {
    var data = await getStorage(item);
    return data;
}

Answer 1

您可以将代码包装在异步函数中并立即执行

var token = null;
var user_id = null;
await ((async () => {
  if (typeof window !== 'undefined') { token = (await getItem('secure_token')); }
  if (typeof window !== 'undefined') { user_id = (await getItem('user_id')); }
})());

Answer 2

您可以这样做以导出依赖于承诺的函数：

let getTokens = async () => {
var token = null;
var user_id = null;
if (typeof window !== 'undefined') { token  = (await getItem('secure_token')); }
if (typeof window !== 'undefined') { user_id = (await getItem('user_id')); }

return {token, user_id };
}


export const API_ROUTE = getTokens().then((data)=> { return axios.create({
    baseURL: API_URL,
    withCredentials: true,
    crossdomain: true,
    headers: {
        "Key": data.token,
        "Id": data.user_id
    } 
}); });

您可以使用此承诺来访问模块中的 axios 实例。

Answer 3

目前 react 中没有顶级的 await 支持，据我所知只有 Deno 支持顶级的 await。因此，要解决您的问题，您所能做的就是使用 IIFE，即立即调用的函数表达式以下列方式解决您的问题：

var token, user_id;
(async () => {
If (typeof window !== 'undefined') { token = (await getItem('secure_token')); }
if (typeof window !== 'undefined') { user_id = (await getItem('user_id')); }
})()

我怎样才能做到顶级等待

3 个答案: