如何确保Promise完成变量初始化后再执行后续代码

问题原因 #

你的代码输出0有两个核心问题：

1. .then() 接收的参数必须是函数引用，你写的.then(printStrings(strings))会在Promise链创建的同步阶段立刻执行printStrings，根本不会等前面的fetch请求、文本解析、字符串分割流程走完。这时候外层定义的strings还是初始的空数组，打印长度自然是0。
2. 没必要在外层单独声明空数组strings存异步结果，Promise链本身支持把上一步的处理结果直接传给下一个回调，靠外部普通变量中转异步值，很容易因为时序问题读到未更新的旧值。

修复方案 #

方案1：正确使用Promise链式传值

把上一步的处理结果直接返回给下一个then，传入then的回调不要提前执行，等前序异步操作resolve后才会触发：

function loadStrings(file){
    fetch(file)
        .then(response => response.text())
        .then(data => data.split("\n"))
        .then(strings => printStrings(strings))
        .catch(err => console.error('文件加载失败:', err));
}

function printStrings(strings){
    console.log(strings.length);
    // 记得加const/let声明变量，避免隐式创建全局变量
    for(const string of strings){
        console.log(string);
    }
}

方案2：用async/await写更直观的同步风格逻辑

async/await会阻塞等待当前异步操作完成，再执行后续代码，完全不需要担心里程时序问题：

async function loadStrings(file){
    try {
        const response = await fetch(file);
        const text = await response.text();
        const strings = text.split("\n");
        // 前面所有await的异步操作全部完成后，才会执行打印逻辑
        printStrings(strings);
    } catch (err) {
        console.error('文件加载失败:', err);
    }
}

function printStrings(strings){
    console.log(strings.length);
    for(const string of strings){
        console.log(string);
    }
}

注意：所有异步赋值的逻辑，要么通过Promise链的参数传递保证执行顺序，要么用await等待异步操作完成，不要在同步代码里直接读取外部变量存储的异步结果，否则大概率会碰到时序问题。

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