如何通过GET请求传ID给API并将返回对象赋值给变量？

嘿，我看了你的代码，核心问题出在异步操作的变量作用域和执行时机上，另外还有几个细节可以优化，帮你一步步梳理：

1. 异步回调内的变量无法直接在外部访问 #

XMLHttpRequest 是异步执行的——也就是说，createList() 函数执行完毕时，API 请求还没完成，回调函数里的 theList 只存在于回调内部，外部根本拿不到它。如果想在函数外部使用这个对象，得用「Promise 封装」或者「async/await」来处理异步结果：

用 Promise 改造你的 XMLHttpRequest 代码 #

function createList() {
  return new Promise((resolve, reject) => {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          const theList = JSON.parse(this.responseText);
          console.log("the name of the current list given the ID is: " + theList.name);
          resolve(theList); // 把获取到的对象传递给外部调用者
        } else {
          reject(new Error(`请求失败，状态码：${this.status}`));
        }
      }
    };

    // 先检查 editID 是否合法
    if (typeof editID === 'undefined') {
      reject(new Error('editID 未定义，请先赋值'));
      return;
    }

    xhttp.open('GET', `todoapi/lists/${editID}`, true);
    xhttp.send();
  });
}

// 调用函数并获取结果
createList()
  .then(theList => {
    // 这里就能拿到你想要的对象，做后续操作
    console.log("外部拿到的列表对象：", theList);
    // 比如把它赋值给全局变量或者其他需要的地方
    // window.globalList = theList;
  })
  .catch(error => {
    console.error("出错了：", error);
  });

2. 缺少错误处理逻辑 #

你原来的代码只处理了「请求成功（readyState=4且status=200）」的情况，但如果 API 返回 404（ID 不存在）、500（服务器错误）或者网络失败，你完全不知道问题出在哪。上面的改造已经加上了错误捕获，能帮你快速排查问题。

3. 确认 editID 已正确定义 #

一定要确保在调用 createList() 之前，editID 已经被赋值为合法的 ID（比如数字或字符串），否则请求的 URL 会变成 todoapi/lists/undefined，直接导致请求失败。

4. 更现代的替代方案：使用 Fetch API #

XMLHttpRequest 已经比较老旧了，现在更推荐用原生的 Fetch API，它天生支持 Promise，代码更简洁易读：

async function createList() {
  // 先校验 editID
  if (typeof editID === 'undefined') {
    throw new Error('editID 未定义，请先赋值');
  }

  try {
    const response = await fetch(`todoapi/lists/${editID}`);
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const theList = await response.json();
    console.log("the name of the current list given the ID is: " + theList.name);
    return theList;
  } catch (error) {
    console.error("获取列表失败：", error);
    throw error; // 把错误抛给调用者处理
  }
}

// 调用方式（两种都可以）
// 方式一：用 then/catch
createList()
  .then(theList => {
    // 使用 theList 变量
  })
  .catch(err => {
    console.error(err);
  });

// 方式二：在 async 函数内用 await
// async function handleList() {
//   try {
//     const myList = await createList();
//     // 使用 myList
//   } catch (err) {
//     console.error(err);
//   }
// }
// handleList();

总结 #

本质上是异步操作的特性导致你无法直接同步拿到结果——必须通过 Promise 或 async/await 来等待请求完成，才能获取并使用 API 返回的对象。加上错误处理和变量校验，就能解决你的问题啦。

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