React中如何处理承诺demo
正文
诺言本质上是一种处理异步操作的方式，一个常见的例子是在React中执行API请求。为了在React生命周期中使用这些操作，我们可以使用useState钩子来存储承诺的结果，当它被解决并重新渲染组件。
本教程假设你熟悉React中钩子的使用，所以如果你不确定，请查看我们的介绍
什么是 "承诺"？
诺言允许你在JavaScript中执行异步操作。要从头开始构建一个Promise，你可以使用Promise构造器。这个函数需要两个参数："resolve"，当操作完成时调用的函数，以及 "reject"，当操作失败时调用的函数。然后，当你的操作完成时，你必须调用这些函数中的一个。
JavaScript给了你两种处理承诺结果的方法，第一种是 .then()，一个以函数为参数的函数，它将把解决后的值传递给该函数：
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()***钩子，用一个空的依赖数组来等待承诺的解析，并将结果存储在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>
);
}
当页面加载时，useEffect的函数将被调用。这将使用axios库执行API调用，你可以在这里或这里找到更多信息。当我们的API调用正在进行时，我们会看到一个加载屏幕；这是一个让你的用户了解正在发生什么的好主意。当承诺解决时，我们得到我们所收到的猫，并将其存储在我们的状态中。组件重新渲染，你的猫就被显示出来了
注意：假设你的承诺可能会失败，并为这种可能性做好准备，这是一个好主意。在这种情况下，如果一个错误被抛出，我们会设置一个不同的状态变量，组件会重新渲染，并显示我们的错误信息。
如果你喜欢异步编程的await语法，你可能会发现上面的代码有问题。重写它以使用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);
}
}, []);
但这将引发一个错误，因为我们试图在一个非异步函数中使用await。我们也不能通过将签名改为 "async () =>"来使useEffect的函数成为异步函数，因为useEffect函数必须是同步的。
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。这本质上只是定义了一个函数并立即调用它，这意味着我们可以在useEffect内部的异步函数中等待我们的承诺。
点击时
在上面的例子中，我们必须刷新页面才能得到一只新猫。这有点不方便，所以让我们重构我们的网站，这样我们就可以通过一个按钮获得一只新猫。
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函数的内容重构为自己的独立函数，这样我们就可以随时触发它了
现在，当我点击按钮时，onClick按钮会触发我们的API请求。当我们的承诺得到解决时，该值被存储在状态中，这就触发了一次重新渲染。
在这个例子中，我使用了一个API调用，但你可以用任何承诺来代替它，不管是像useTimeout这样简单的东西，还是更复杂的东西。如果你喜欢这篇文章，如果我帮助解决了你的问题，或者你有任何问题，请在下面的评论中告诉我。
以上就是React中如何处理承诺demo的详细内容，更多关于React处理承诺的资料请关注脚本之家其它相关文章！
相关文章
react配置webpack-bundle-analyzer项目优化踩坑记录
这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本篇文章主要介绍了React Native仿美团下拉菜单的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
React组件性能优化可以减少渲染真实DOM的频率,以及减少VD比对的频率,本文为大家整理了一些有效的React组件优化方法,需要的小伙伴可以参考下2023-12-12
在React中,组件之间的通信是一个非常重要的话题,React提供了几种方式来实现跨组件通信,下面小编将详细讲讲其中几种通信方式,并提供实际的代码示例,需要的可以参考下2023-11-11
本篇文章主要介绍了浅谈React 服务器端渲染的使用，React是最受欢迎的客户端 JavaScript 框架，在本教程中，我们将逐步向您介绍服务器端的渲染示例2018-05-05
本文讲述了开发React应用时如何使用shouldComponentUpdate生命周期函数以及PureComponent去避免类组件进行无用的重渲染，以及如何使用最新的React.memo API去优化函数组件的性能2019-03-03
这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用2022-09-09
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
react中关于函数调用()与bind this的原因及分析
这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论