JavaScript中如何将嵌套函数onreadystatechange的值传递给父函数？

我有如下函数结构：

function myfunc(param1, param2){
         //some stuff happens 
         //some stuff happens
           let request = new XMLHttpRequest();
    request.open("POST",documentumUploadAPI);

    request.setRequestHeader('Authorization', 'Bearer ' + token);
    request.setRequestHeader('Content-Type', 'multipart/form-data');
    request.send(formData);
    var flag = false;
    var flag1 = 'not successful';
  
     request.onreadystatechange = function() {
        if (request.readyState === 4) {

        flag = request.responseText.includes('"success" : true');
        if(flag){
          flag1 = 'successful';

              }

          }

      }

}

现在我想要返回flag1的值并使用它，但由于变量作用域限制，无法获取到更新为'successful'的flag1值。请问有没有办法返回在onreadystatechange函数中被修改后的flag1值？

核心问题不是作用域，而是XMLHttpRequest是异步操作——myfunc会在请求完成前就执行完毕，直接返回flag1只能拿到初始值。要获取异步更新后的结果，有几种实用方案：

1. 用回调函数处理结果 #

把需要使用flag1的逻辑写成回调函数，在请求完成后触发：

function myfunc(param1, param2, callback){
         //some stuff happens 
         //some stuff happens
           let request = new XMLHttpRequest();
    request.open("POST",documentumUploadAPI);

    request.setRequestHeader('Authorization', 'Bearer ' + token);
    // 注意：multipart/form-data不需要手动设置，XMLHttpRequest会自动生成正确的请求头
    request.send(formData);
  
     request.onreadystatechange = function() {
        if (request.readyState === 4) {
          const flag = request.responseText.includes('"success" : true');
          const flag1 = flag ? 'successful' : 'not successful';
          // 调用回调传递结果
          callback(flag1);
        }
      }
}

// 使用示例
myfunc(param1, param2, function(result) {
  console.log(result); // 这里能拿到更新后的flag1
});

2. 返回Promise对象（推荐） #

用Promise封装异步请求，适配现代异步编程模式：

function myfunc(param1, param2){
  return new Promise((resolve, reject) => {
         //some stuff happens 
         //some stuff happens
           let request = new XMLHttpRequest();
    request.open("POST",documentumUploadAPI);

    request.setRequestHeader('Authorization', 'Bearer ' + token);
    request.send(formData);
    
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
          if(request.status >= 200 && request.status < 300) {
            const flag = request.responseText.includes('"success" : true');
            const flag1 = flag ? 'successful' : 'not successful';
            resolve(flag1); // 请求成功时返回结果
          } else {
            reject(new Error('请求失败，状态码：' + request.status)); // 请求失败抛出错误
          }
        }
      }
  });
}

// 使用方式1：then/catch链式调用
myfunc(param1, param2)
  .then(result => {
    console.log(result); // 拿到更新后的flag1
  })
  .catch(error => {
    console.error(error);
  });

// 使用方式2：async/await（更简洁）
async function handleUpload() {
  try {
    const result = await myfunc(param1, param2);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
handleUpload();

关键提醒 #

• 别用死循环等同步方式等待异步请求，会直接卡死页面。
• 手动设置Content-Type: multipart/form-data是多余的，甚至可能导致请求失败——XMLHttpRequest会自动根据formData生成包含边界符的正确请求头。

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