JS Promise链式调用时全局user变量取值为undefined问题

这是典型的**变量名遮蔽（Variable Shadowing）**错误：

• 你在全局作用域声明了let user，但第一个.then()的回调函数参数也命名为user，该参数属于回调函数的局部作用域，访问优先级高于外层全局作用域的同名变量。
• 回调里写的user = user，等价于把局部参数user的值赋值给它自身，全程没有修改外层全局的user变量。全局user始终保持初始化的undefined状态，所以在后续链式回调中打印时自然得到undefined。

方案1：修改回调参数名，避免命名冲突 #

把第一个.then的回调参数改成和全局变量不同的名称，赋值时就会正确修改外层全局的user：

let user;

getCustomer(1)
.then(customerData => {
    // 此处赋值的是外层全局作用域的user变量
    user = customerData;
    return getTopMovies();
})
.then(movies => {
    console.log(user); // 可正常获取到用户数据
    console.log(movies);
})

方案2：通过Promise链传递数据（更推荐） #

不建议在异步流程中依赖全局变量存储状态，很容易出现命名冲突、状态被意外覆盖的问题。更合理的写法是把需要用到的多份数据沿着Promise链向下传递，不需要单独声明全局变量：

getCustomer(1)
.then(user => {
    // 等待电影接口返回后，把用户数据和电影数据合并传递给下一个回调
    return getTopMovies().then(movies => ({ user, movies }));
})
.then(({ user, movies }) => {
    // 直接通过参数解构拿到两份数据，无全局变量污染
    console.log(user);
    console.log(movies);
})

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