Promise 是 JavaScript 中用于处理异步操作的一种很便捷的方式。它可以将异步操作的成功结果或错误信息以一种可读性良好的方式传递给调用者,并可以通过链式调用的方式实现对异步操作的串联操作。在 Promise 中,我们经常会用到 .then()、.catch() 和 .finally() 这些方法,它们在 Promise 的使用中起到了非常重要的作用。本文将介绍这三个方法的使用场景,帮助读者更好地理解 Promise 在实际开发中的应用。
.then() 方法
.then() 方法是 Promise 最常用的方法之一,用于在 Promise 成功执行之后接收 Promise 返回的结果。.then() 的语法如下所示:
promise.then(onFulfilled, onRejected);
其中,onFulfilled 是 Promise 成功执行后的回调函数,它可以接收 Promise 成功返回的结果;onRejected 是 Promise 执行失败后的回调函数,它可以接收 Promise 执行失败的错误信息。需要注意的是,.then() 方法可以多次被调用,以实现对 Promise 的串联操作。例如:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
上述代码中,我们首先使用了 fetch() 方法获取了一个 API 地址的数据,接着使用 .then() 方法将返回值转换为 JSON 格式,并将其输出到控制台上。如果 Promise 执行过程中出现了错误,我们就可以通过 .catch() 方法捕获错误,并将错误信息输出到控制台上。
.catch() 方法
.catch() 方法用于 Promise 执行失败时接收 Promise 返回的错误信息。.catch() 的语法如下所示:
promise.catch(onRejected);
其中,onRejected 是 Promise 执行失败后的回调函数,它可以接收 Promise 执行失败的错误信息。需要注意的是,当 Promise 中执行错误时,调用了 .catch() 方法后就不会再执行后续的 .then() 方法。例如:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)) .then(() => console.log('Done'));
上述代码中,如果在第一个 .then() 方法中调用了一个未定义的函数,那么就会执行第一个 .catch() 方法并输出错误信息到控制台上,而不会执行第二个 .then() 方法。
.finally() 方法
.finally() 方法用于在 Promise 执行结束后,无论是否成功都会执行的一段代码。.finally() 的语法如下所示:
promise.finally(onFinally);
其中,onFinally 是一个回调函数,可以在 Promise 执行结束后无论成功或失败都会被执行。例如:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)) .finally(() => console.log('Done'));
上述代码中,无论在 .then() 方法中是否成功获取到 API 的数据,都将会执行 .finally() 方法中的代码并输出 'Done' 到控制台上。
总结
通过学习本文,我们可以发现,在实际开发中,Promise 提供的 .then()、.catch()、和 .finally() 这三个方法是十分实用的,它们可以帮助我们轻松地完成异步操作的处理,并将结果以一种易读的方式呈现给调用者。当然,不同的需求场景下,我们可能需要结合不同的方法来使用 Promise,例如通过 .then() 的链式调用来实现异步的顺序操作,也可以通过 .catch() 来捕获错误并输出错误信息等等。因此,熟练的掌握这些方法的使用场景对于我们在实际开发中的提高将有很大的帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/646ef2ae968c7c53b0d550a3