首頁(yè) 猿問(wèn) 什么時(shí)候應(yīng)該使用 axios...

什么時(shí)候應(yīng)該使用 axios 進(jìn)行異步調(diào)用，什么時(shí)候只使用 useEffect？

JavaScript

絕地?zé)o雙 2023-09-28 16:13:32

我現(xiàn)在很困惑。學(xué)習(xí)js前端以及如何發(fā)出API請(qǐng)求。到目前為止，每當(dāng)我進(jìn)行 API 調(diào)用時(shí)，我總是使用一些可以讓我處理異步請(qǐng)求（axios或thunk）的東西。但現(xiàn)在我遇到了一個(gè)案例，我正在向我的 Firebase/Firestore 發(fā)出請(qǐng)求，并且在我觀看的 yt 視頻中，僅useEffect使用了該請(qǐng)求。沒(méi)有任何async/await，例如：useEffect(() => { // snapshot - to check, if there is a change (like a new entry) in the database db.collection('products').onSnapshot((snapshot) => { setProducts(snapshot.docs.map((doc) => doc.data())); });}, []);為什么是這樣？

查看完整描述

2 回答

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

在示例代碼片段中

useEffect(() => {

// snapshot - to check, if there is a change (like a new entry) in the database

db.collection("products").onSnapshot(snapshot => {

setProducts(snapshot.docs.map(doc => doc.data()))

})

}, []);

db.collection("products")管理自己的異步事件處理。當(dāng)收到“快照”事件時(shí)，它會(huì)調(diào)用onSnapshot回調(diào)并更新?tīng)顟B(tài)。沒(méi)有什么可以等待的，特別是因?yàn)闆](méi)有返回值。

您還應(yīng)該注意，useEffect鉤子回調(diào)是 100%同步代碼，它們不能被標(biāo)記async和await任何代碼調(diào)用。然而，他們可以調(diào)用async自己進(jìn)行等待等的函數(shù)。

關(guān)于你標(biāo)題中的問(wèn)題

任何時(shí)候您想要從組件生命周期中發(fā)出任何副作用時(shí)，都可以使用useEffect掛鉤，例如控制臺(tái)日志記錄狀態(tài)、獲取數(shù)據(jù)、調(diào)度操作。這主要是因?yàn)楹瘮?shù)式 React 組件的整個(gè)函數(shù)體都被視為純函數(shù)。with dependency 更類似于基于類的組件的、和生命周期方法。它們只是作為 React 組件生命周期的一部分被單獨(dú)調(diào)用。useEffectcomponentDidMountcomponentDidUpdatecomponentWillUnmount

每當(dāng)您需要獲取數(shù)據(jù)時(shí)，請(qǐng)使用、或或任何其他數(shù)據(jù)獲取axios代碼。fetch

反對(duì) 回復(fù) 2023-09-28

蠱毒傳說(shuō)

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超3個(gè)贊

useEffect() - 它是一個(gè)鉤子，允許我們?cè)诠δ芙M件（如網(wǎng)絡(luò)請(qǐng)求等）中執(zhí)行副作用。
Axios - 它只是一個(gè)庫(kù)，我們可以在其中發(fā)出 http 請(qǐng)求，例如 JavaScript 中的 fetch API，而且 axios 是基于 Promise 的。

反對(duì) 回復(fù) 2023-09-28