如何获取Fetch API返回的response对应的Promise状态？

原生JavaScript的Promise并没有提供直接读取promiseState的内置API，但我们可以通过包装Promise的方式来追踪它的状态，下面给你两种可行的实现方式：

方案一：封装状态追踪函数（实时获取状态） #

这个方法会包装目标Promise，在它状态变化时更新内部记录，让你可以随时获取当前状态：

function trackPromise(promise) {
  let state = 'pending';
  // 包装原Promise，在resolve/reject时更新状态
  const wrappedPromise = promise
    .then(result => {
      state = 'fulfilled';
      return result;
    })
    .catch(error => {
      state = 'rejected';
      throw error;
    });

  return {
    promise: wrappedPromise, // 对外暴露包装后的Promise，不影响正常使用
    get state() { // 通过getter获取当前状态
      return state;
    }
  };
}

// 适配你的请求代码
let my_url = 'google.com';
const fetchPromise = fetch('https://api.codetabs.com/v1/proxy?quest=' + my_url).then(resp => resp.text());
const trackedPromise = trackPromise(fetchPromise);

// 初始状态是pending
console.log(trackedPromise.state); 

// 延迟一段时间后查看状态（此时请求大概率已完成）
setTimeout(() => {
  console.log(trackedPromise.state); // 输出fulfilled或rejected
}, 2000);

// 正常使用Promise处理结果
trackedPromise.promise
  .then(text => console.log('响应内容:', text))
  .catch(err => console.error('请求失败:', err));

方案二：用async/await间接判断（适合关注最终结果的场景） #

如果你的业务逻辑允许等待Promise完成，也可以通过try-catch块来间接确定最终状态：

async function handleFetch() {
  let my_url = 'google.com';
  try {
    const resp = await fetch('https://api.codetabs.com/v1/proxy?quest=' + my_url);
    const text = await resp.text();
    console.log('Promise状态: fulfilled');
    console.log('响应内容:', text);
  } catch (err) {
    console.log('Promise状态: rejected');
    console.error('请求失败:', err);
  }
}

handleFetch();

注意事项 #

Promise的状态是不可逆的：一旦从pending变为fulfilled或rejected，就不会再发生变化。

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