为何React项目中Promise.then赋值变量正常运行时为undefined，调试时正常？

为什么会出现undefined？ #

核心原因是异步代码的执行顺序问题：

• imageresizer(item.file)返回的是Promise，属于异步操作，它的then回调不会立刻执行，而是被放到浏览器的异步任务队列中等待执行。
• 你写的var anotherinstance=filetoupload;和item.upload.formData.append('files[]',filetoupload);是同步代码，会优先在主线程中执行。
• 所以当同步代码运行时，filetoupload还没被then回调赋值，自然是undefined。
• 调试时暂停会让浏览器等待异步任务完成，此时then已经执行赋值操作，所以能看到正确的变量值。

修正方案 #

方案1：将依赖变量的代码移入then回调 #

把需要使用filetoupload的代码全部放到then内部，确保在变量赋值完成后再执行：

var filetoupload;
imageresizer(item.file).then((value) => {
    filetoupload = value;
    var anotherinstance = filetoupload;
    item.upload.formData.append('files[]', filetoupload);
});

方案2：使用async/await简化异步逻辑 #

如果当前执行代码的函数可以声明为async，用await可以让异步代码逻辑更直观，看起来像同步代码：

async function processUpload(item) {
    const filetoupload = await imageresizer(item.file);
    const anotherinstance = filetoupload;
    item.upload.formData.append('files[]', filetoupload);
}

// 调用处理函数
processUpload(item);

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