快捷導(dǎo)航

React中如何處理承諾demo

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

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

正文

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

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

什么是 "承諾"？

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

JavaScript給了你兩種處理承諾結(jié)果的方法，第一種是 .then()，一個(gè)以函數(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));

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

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

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

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

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

下面是一個(gè)使用該方法獲得一只隨機(jī)貓的例子，使用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)頁面加載時(shí)，useEffect的函數(shù)將被調(diào)用。這將使用axios庫執(zhí)行API調(diào)用，你可以在這里或這里找到更多信息。當(dāng)我們的API調(diào)用正在進(jìn)行時(shí)，我們會(huì)看到一個(gè)加載屏幕；這是一個(gè)讓你的用戶了解正在發(fā)生什么的好主意。當(dāng)承諾解決時(shí)，我們得到我們所收到的貓，并將其存儲(chǔ)在我們的狀態(tài)中。組件重新渲染，你的貓就被顯示出來了

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

如果你喜歡異步編程的await語法，你可能會(huì)發(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ā)一個(gè)錯(cuò)誤，因?yàn)槲覀冊噲D在一個(gè)非異步函數(shù)中使用await。我們也不能通過將簽名改為 "async () =>"來使useEffect的函數(shù)成為異步函數(shù)，因?yàn)閡seEffect函數(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來解決這個(gè)問題，也就是Immediately-Invoked Function Expression。這本質(zhì)上只是定義了一個(gè)函數(shù)并立即調(diào)用它，這意味著我們可以在useEffect內(nèi)部的異步函數(shù)中等待我們的承諾。

點(diǎn)擊時(shí)

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

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)為自己的獨(dú)立函數(shù)，這樣我們就可以隨時(shí)觸發(fā)它了