如何将XHR、Fetch、Async-Await的API响应转为JavaScript对象

你的核心问题是异步操作的时机处理错误——所有网络请求都是异步的，不能用同步方式直接获取结果，必须等待异步操作完成后再处理数据。结合Firebase云函数定时任务场景，以下是针对你遇到问题的具体解决方法：

一、Fetch的正确用法（推荐） #

Fetch本身返回Promise，直接赋值后立即访问变量会因异步未完成得到undefined，必须通过await或.then()等待请求完成后再获取数据。

在Firebase定时任务中，可将任务函数声明为async，用await处理Fetch请求：

exports.scheduledTask = functions.pubsub.schedule('every 1 hours').onRun(async (context) => {
  try {
    // 等待请求响应
    const response = await fetch('你的API地址');
    // 将响应转换为JS对象数组
    const data = await response.json();
    
    // 在此处使用转换后的对象数组
    console.log(data);
    // 执行业务逻辑（如写入Firestore等）
    
    return null;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
});

二、XHR回调数据外部访问问题的解决 #

XHR是异步的，回调函数会在请求完成后执行，外部同步代码会先于回调运行，直接访问回调内变量会拿不到值。解决方法是将XHR封装为Promise，再用await等待结果：

// 封装XHR为Promise函数
function fetchWithXHR(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        // 将响应文本转为JS对象
        const data = JSON.parse(xhr.responseText);
        resolve(data);
      } else {
        reject(new Error(`请求失败，状态码：${xhr.status}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error('网络请求错误'));
    };
    xhr.send();
  });
}

// 在定时任务中使用
exports.scheduledTask = functions.pubsub.schedule('every 1 hours').onRun(async (context) => {
  try {
    const data = await fetchWithXHR('你的API地址');
    // 在此处使用转换后的对象数组
    console.log(data);
    
    return null;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
});

三、封装XHR为Promise后出现pending状态的解决 #

你得到pending状态是因为只创建了Promise但未等待它完成。Promise的pending状态表示操作仍在进行，必须通过await或.then()等待其变为fulfilled状态才能拿到结果：

// 错误写法：直接获取Promise对象，状态为pending
const promise = fetchWithXHR('你的API地址');
console.log(promise); // 输出Promise { <pending> }

// 正确写法：用await等待结果
const data = await fetchWithXHR('你的API地址');
console.log(data); // 输出转换后的对象数组

关键注意事项 #

• Firebase定时任务支持async/await，必须将任务函数声明为async才能使用await。
• 所有异步操作（网络请求、数据库操作等）都需等待完成后再处理结果，不能同步访问异步返回值。
• 务必添加错误处理（try/catch或.catch()），避免请求失败导致定时任务报错。

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