如何让代码等待函数返回？解决JS异步提前打印变量x的问题

Hey there! Let's break down your problem first—you're dealing with classic async timing issues in JavaScript, especially when splitting code across multiple files. The reason your Promise and callback attempts didn't work is probably because you weren't properly chaining the async flow between files. Here are a few solid solutions tailored to multi-file scenarios:

This is the most reliable approach for most cases. Let's split your code into two files properly:

data.js (handles async assignment of x) #

// Simulate an async operation (API call, file read, etc.)
export const fetchX = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const x = "Async-assigned value of x";
      resolve(x);
    }, 1000); // Mimic async delay
  });
};

main.js (prints x only after it's ready) #

import { fetchX } from './data.js';

async function printXWhenReady() {
  const x = await fetchX(); // Wait for the async assignment to finish
  console.log(x); // Now x is definitely assigned!
}

printXWhenReady();

By wrapping the print logic in an async function and using await on the Promise, you guarantee the print runs only after x has been assigned.

If your environment supports ES Modules (modern browsers, Node.js 14.8+), you can use top-level await to avoid wrapping everything in a function:

data.js #

// Directly export the Promise-resolved value with top-level await
export const x = await new Promise((resolve) => {
  setTimeout(() => resolve("Async x value"), 1000);
});

main.js #

import { x } from './data.js';

console.log(x); // The module system waits for the Promise to resolve before loading x

This is the most concise option for straightforward cross-file async dependencies.

If multiple files need to react when x is ready, use an event emitter to decouple the code:

data.js #

// Node.js example (use CustomEvent in browsers)
import { EventEmitter } from 'events';
const xReadyEmitter = new EventEmitter();

// Async assignment logic
setTimeout(() => {
  const x = "Async x is ready!";
  xReadyEmitter.emit('x-ready', x); // Broadcast that x is ready
}, 1000);

export { xReadyEmitter };

main.js #

import { xReadyEmitter } from './data.js';

// Listen for the "x-ready" event to trigger the print
xReadyEmitter.on('x-ready', (x) => {
  console.log(x);
});

This works great when you have multiple parts of your app that need to know when x is available.

Chances are your Promise usage didn't include waiting for the resolution before printing. For example, this won't work:

// ❌ Wrong approach
const xPromise = new Promise(resolve => setTimeout(() => resolve(5), 1000));
let x;
xPromise.then(val => x = val);
console.log(x); // Logs undefined because .then runs asynchronously

You need to put the print inside the .then() block or use await to pause execution until the Promise resolves.

内容的提问来源于stack exchange，提问作者Astrodude