javascript - How can I do top level await - Stack Overflow

admin管理员组

文章数量:1293645

I am trying to build a react app and want to call a function like this:

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

I am getting error that:

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

How can I achieve that. because without await, I am getting [object Promise] and not the actual value.

Below is the plete code:

import axios from "axios";
import { getStorage } from "../../ponents/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;
}

I am trying to build a react app and want to call a function like this:

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

I am getting error that:

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

How can I achieve that. because without await, I am getting [object Promise] and not the actual value.

Below is the plete code:

import axios from "axios";
import { getStorage } from "../../ponents/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;
}

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Jul 10, 2021 at 8:46 VLAZ 29.1k99 gold badges6262 silver badges8484 bronze badges asked Jul 10, 2021 at 8:22 Haren SarmaHaren Sarma 2,55377 gold badges4848 silver badges7575 bronze badges 5

• 1 Just wrap it in a function and call that function at the top level. e.g async function main() { /*Do stuff */ } main() – TommyBs Commented Jul 10, 2021 at 8:25
• 1 I believe you can only do top-level await in TypeScript, possibly behind a feature flag. – Ace Commented Jul 10, 2021 at 8:32
• Is this in your html file or your script file? Are you including your react bundle after that line and expect those variables to already be there? what es after that that uses the two variables that you are setting? – Alex028502 Commented Jul 10, 2021 at 8:34
• (Can you give us a little more context?) – Alex028502 Commented Jul 10, 2021 at 8:34
• Hi, I have updated the answer with plete code – Haren Sarma Commented Jul 10, 2021 at 8:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Currently there is no top level await support present in react and as far as I know only Deno supports top level await. So to overe your problem all you can do is to use IIFE i.e., immediate invoked function expression to solve your problem in the below manner:

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

You can do this to export a function dependent on a promise :

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
    } 
}); });

You can use this promise to access the axios instance in your module.

You can wrap your code in the async function and immediately execute it

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')); }
})());

本文标签： javascriptHow can I do top level awaitStack Overflow