react.js

1.jsx

 

2.vite
3.typescript

4.npm

5.脚手架

webpack

初始化  指令 npx

启动

es6模块化语法

6.es6

7.浏览器react插件

react调试

8.浏览器如何管理异步操作(redux支持异步状态操作)

useEffect(()=>{

    async function getAticleList(){

    const res=await getArticleAPI()

    console.log(res)

    setArticleList(res.data.results)

    }

    getAticleList()

  },[])

当你调用了 getArticleList() 后返回的是一个 Promise，这个 Promise 会自动进入 JavaScript 的**事件循环（Event Loop）**机制中排队执行。你不处理它，它也会继续执行。

---

🧠 那这个 Promise 到底“怎么被处理”了？

我们来深入一步：

✅ 1. 调用 async 函数返回的是一个 Promise

async function getArticleList() { const res = await getArticleAPI(); setArticleList(res.data.results); } const p = getArticleList(); // 返回一个 Promise

这时 p 是一个正在“进行中（pending）”的 Promise。

---

✅ 2. 即使你不 await，这个 Promise 的内部逻辑也会继续执行！

getArticleList(); // 我不 await，也不写 then，也不存变量

这是合法的，并且 这个 Promise 仍然会运行它的逻辑，直到完成（fulfilled）或失败（rejected）为止。

原因是：JS 的 async/await 是基于 Promise 的语法糖，Promise 一旦创建，就会运行它的 executor 函数。

也就是说，只要你写了 getArticleList()，它已经被触发执行了，不管你 await 不 await，它都执行。

---

✅ 3. 那这个 Promise 到底谁来“接手”？

如果你没写 await 或 .then()，那这个 Promise：

• 会“无人接手处理”，但它还是会 继续执行；

• 如果它成功（resolve）了，没事；

• 如果它失败（reject）了，并且你 没有 catch，就会报一个未处理的 Promise 拒绝：

Uncaught (in promise) Error: 请求失败

也就是你会在控制台看到警告或错误。

---

✅ 4. 所以，正确做法是：要么 try/catch，要么 .catch

即便你不 await 它，也最好处理它的错误：

getArticleList().catch(err => { console.error('请求失败', err); });

或者在 async 函数中：

async function getArticleList() { try { const res = await getArticleAPI(); setArticleList(res.data.results); } catch (e) { console.error('获取失败:', e); } }

---

✅ 举个生活化的类比：

getArticleList();

就像你打电话叫了外卖员送外卖。

• 你不需要 盯着 他送（await）；

• 他也不会因为你没等他就不送了；

• 他还是会自己照常骑电动车（异步执行）；

• 如果他摔倒了（异常）没人管，就报错（Uncaught (in promise)）；

• 所以你要么给他戴头盔（try/catch），要么后面加个 .catch()。

---

✅ 小结归纳

问题	解答
getArticleList() 返回的 Promise 怎么处理的？	被放进 JS 的事件循环里继续异步执行
不 await 会不会中断它？	不会，它一样会执行完成
有必要处理这个 Promise 吗？	是的，特别是要处理错误，不然会抛出未捕获异常
React 会不会处理它？	不会，React 根本不管这个 Promise，你要自己管理