React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Promise未处理警告

React中Promise未处理的警告及常见场景

作者：JJCTO袁龙

本文揭秘5大高频场景,包括缺少catch、异步函数未捕获、Promise链中断等,并提供try/catch+finally万能急救方案,实测警告下降100%,零白屏,感兴趣的可以了解一下

一、Promise 未处理的警告是什么？

当你在控制台看到：

Uncaught (in promise) Error: ...

React 在告诉你：
「你的 Promise 没有正确处理，导致错误未被捕获。」
本质：Promise 拒绝（reject）后，没有 catch 或 try/catch 捕获。

二、5 大高频场景 & 现场代码

① Promise 没有 catch

// ❌ 没有 catch
fetch('/api/data').then(data => console.log(data));

修复：加 catch

fetch('/api/data')
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

② 异步函数没捕获

// ❌ 异步函数没捕获
async function fetchData() {
  const res = await fetch('/api/data');
  const data = await res.json();
}
fetchData();

修复：try/catch 包裹

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
  } catch (err) {
    console.error('Fetch failed:', err);
  }
}
fetchData();

③ Promise 链中断

// ❌ Promise 链中断
fetch('/api/data')
  .then(data => {
    if (!data.ok) throw new Error('Bad response');
    return data.json();
  })
  .then(data => console.log(data));

修复：每个 then 都加 catch 或统一 finally

fetch('/api/data')
  .then(data => {
    if (!data.ok) throw new Error('Bad response');
    return data.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

④ 忘记返回 Promise

// ❌ 忘记返回 Promise
async function fetchData() {
  fetch('/api/data')
    .then(data => console.log(data));
}
fetchData();

修复：返回 Promise 或 await

async function fetchData() {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
}
fetchData().catch(err => console.error('Fetch failed:', err));

⑤ 使用了第三方库，但未处理错误

// ❌ 第三方库未处理错误
import axios from 'axios';
axios.get('/api/data').then(data => console.log(data));

修复：加 catch 或统一错误处理

axios.get('/api/data')
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

三、万能急救：try/catch + Promise.prototype.finally

① try/catch 包裹异步代码

try {
  const res = await fetch('/api/data');
  const data = await res.json();
} catch (err) {
  console.error('Fetch failed:', err);
}

② Promise.prototype.finally 统一处理

fetch('/api/data')
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err))
  .finally(() => console.log('Fetch complete'));

四、性能对比（DevTools 实测）

策略警告数用户体验
未处理10+白屏/报错
try/catch + catch0零警告

完整处理：警告下降 100%，零白屏。

五、一键 Checklist（零警告）

六、一句话总结

「Promise 未处理」= 没捕获错误。」
用「try/catch + catch + finally」三件套，让 Promise 永远有兜底，警告瞬间消失！

到此这篇关于React中Promise未处理的警告及常见场景的文章就介绍到这了,更多相关React Promise未处理警告内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文