快捷導(dǎo)航

React中如何處理承諾demo

更新時間：2022年12月13日 09:39:44 作者：Jovie

這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

諾言本質(zhì)上是一種處理異步操作的方式，一個常見的例子是在React中執(zhí)行API請求。為了在React生命周期中使用這些操作，我們可以使用useState鉤子來存儲承諾的結(jié)果，當(dāng)它被解決并重新渲染組件。

本教程假設(shè)你熟悉React中鉤子的使用，所以如果你不確定，請查看我們的介紹

什么是 "承諾"？

諾言允許你在JavaScript中執(zhí)行異步操作。要從頭開始構(gòu)建一個Promise，你可以使用Promise構(gòu)造器。這個函數(shù)需要兩個參數(shù)："resolve"，當(dāng)操作完成時調(diào)用的函數(shù)，以及 "reject"，當(dāng)操作失敗時調(diào)用的函數(shù)。然后，當(dāng)你的操作完成時，你必須調(diào)用這些函數(shù)中的一個。

JavaScript給了你兩種處理承諾結(jié)果的方法，第一種是 .then()，一個以函數(shù)為參數(shù)的函數(shù)，它將把解決后的值傳遞給該函數(shù)：

const promiseThen = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hi!');
    }, 1000);
});
promiseThen
    .then((val) => {
        console.log(val);
    })
    .catch((err) => console.log(err));

其他的東西都不會等待你的承諾解決，但是你提供給 ***.then()***將在承諾解析時運行。

另一種方法是 "async/await "功能，這通常是首選；如果你 "等待 "一個承諾，代碼將停止運行，直到承諾完成。下面是上面的例子，重寫后使用了await來代替：

const promiseAwait = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hi!');
    }, 1000);
});
const result = await promiseAwait;
console.log(result);

在React的頁面加載中使用承諾

要在React中使用一個Promise的值，你可以使用一個 ***useEffect()***鉤子，用一個空的依賴數(shù)組來等待承諾的解析，并將結(jié)果存儲在useState鉤子的值中。

下面是一個使用該方法獲得一只隨機貓的例子，使用CatAAS API：

function PromisesPage() {
    const [catUrl, setCatUrl] = useState('');
    const [error, setError] = useState(false);
    const [state, setState] = useState('');
    useEffect(() => {
        setState('loading');
        axios
            .get('https://cataas.com/cat?json=true')
            .then((res) => {
                console.log(res);
                setState('success');
                setCatUrl('https://cataas.com' + res.data.url);
            })
            .catch((err) => {
                console.error('Error:', err);
                setState('error');
                setError(err);
            });
    }, []);
    if (state === 'error')
        return (
            <h1>
                {error.toString()}
            </h1>
        );
    return (
        <div>
            <div>
                {state === 'loading' ? (
                    <h1>Loading...</h1>
                ) : (
                    <img src="{catUrl}" />
                )}
            </div>
        </div>
    );
}

當(dāng)頁面加載時，useEffect的函數(shù)將被調(diào)用。這將使用axios庫執(zhí)行API調(diào)用，你可以在這里或這里找到更多信息。當(dāng)我們的API調(diào)用正在進行時，我們會看到一個加載屏幕；這是一個讓你的用戶了解正在發(fā)生什么的好主意。當(dāng)承諾解決時，我們得到我們所收到的貓，并將其存儲在我們的狀態(tài)中。組件重新渲染，你的貓就被顯示出來了

注意：假設(shè)你的承諾可能會失敗，并為這種可能性做好準備，這是一個好主意。在這種情況下，如果一個錯誤被拋出，我們會設(shè)置一個不同的狀態(tài)變量，組件會重新渲染，并顯示我們的錯誤信息。

如果你喜歡異步編程的await語法，你可能會發(fā)現(xiàn)上面的代碼有問題。重寫它以使用await，你可以這樣寫。

    useEffect(() => {
            setState('loading');
            try {
                const res = await axios.get('https://cataas.com/cat?json=true');
                setCatUrl(res.data.url);
                setState('success');
            } catch (e) {
                setError(e);
            }
    }, []);

但這將引發(fā)一個錯誤，因為我們試圖在一個非異步函數(shù)中使用await。我們也不能通過將簽名改為 "async () =>"來使useEffect的函數(shù)成為異步函數(shù)，因為useEffect函數(shù)必須是同步的。

    useEffect(() => {
        (async () => {
            setState('loading');
            try {
                const res = await axios.get('https://cataas.com/cat?json=true');
                setCatUrl(res.data.url);
                setState('success');
            } catch (e) {
                setError(e);
            }
        })();
    }, []);
    useEffect(() => {
        const fetchCat = async () => {
            setState('loading');
            try {
                const res = await axios.get('https://cataas.com/cat?json=true');
                setCatUrl(res.data.url);
                setState('success');
            } catch (e) {
                setError(e);
            }
        };
        fetchCat();
    }, []);

我們可以用IIFE來解決這個問題，也就是Immediately-Invoked Function Expression。這本質(zhì)上只是定義了一個函數(shù)并立即調(diào)用它，這意味著我們可以在useEffect內(nèi)部的異步函數(shù)中等待我們的承諾。

點擊時

在上面的例子中，我們必須刷新頁面才能得到一只新貓。這有點不方便，所以讓我們重構(gòu)我們的網(wǎng)站，這樣我們就可以通過一個按鈕獲得一只新貓。

function PromisesPage() {
    const [catUrl, setCatUrl] = useState('');
    const [error, setError] = useState(false);
    const [state, setState] = useState('');
    function fetchCat() {
        setState('loading');
        axios
            .get('https://cataas.com/cat?json=true')
            .then((res) => {
                console.log(res);
                setState('success');
                setCatUrl('https://cataas.com' + res.data.url);
            })
            .catch((err) => {
                console.error('Error:', err);
                setState('error');
                setError(err);
            });
    }
    useEffect(() => {
        fetchCat();
    }, []);
    if (state === 'error')
        return (
            <h1>
                {error.toString()}
            </h1>
        );
    return (
        <div>
            <div>
                {state === 'loading' ? (
                    <h1>Loading...</h1>
                ) : (
                    <img src="{catUrl}" />
                )}
            </div>
            <button>
                New Cat?
            </button>
        </div>
    );
}

我們把useEffect函數(shù)的內(nèi)容重構(gòu)為自己的獨立函數(shù)，這樣我們就可以隨時觸發(fā)它了