HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐实例浏览器支持Promise 的使用方法then() 方法实例catch() 方法实例finally() 方法实例Promise 的链式调用实例Promise 的静态方法Promise.all()实例Promise.race()实例Promise.resolve() 和 Promise.reject()实例实际应用示例示例 1: 使用 Promise 处理 AJAX 请求实例示例 2: 使用 Promise 链处理多个异步操作实例常见问题与最佳实践1. 避免 Promise 嵌套实例实例2. 总是处理拒绝情况3. Promise 不是可取消的4. 回答常见的问题FAQPromise 与 async/await实例在学习本章节内容前你需要先了解什么是异步编程Promise 是一个 ECMAScript 6 提供的类目的是更加优雅地书写复杂的异步任务。Promise 是 JavaScript 中用于处理异步操作的对象它代表一个异步操作的最终完成或失败及其结果值。简单来说Promise 是一个承诺表示将来某个时间点会返回一个结果可能是成功的结果也可能是失败的原因。Promise 有三种状态pending初始状态既不是成功也不是失败状态fulfilled意味着操作成功完成rejected意味着操作失败实例const myPromise new Promise((resolve, reject) {// 异步操作代码if (/* 操作成功 */) {resolve(成功的结果); // 将 Promise 状态改为 fulfilled} else {reject(失败的原因); // 将 Promise 状态改为 rejected}});浏览器支持由于 Promise 是 ES6 新增加的所以一些旧的浏览器并不支持苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。以下是 Promise 浏览器支持的情况Chrome 58Edge 14Firefox 54Safari 10Opera 55Promise 的使用方法then() 方法then()方法用于指定 Promise 状态变为 fulfilled 或 rejected 时的回调函数。实例myPromise.then((result) {// 处理成功情况console.log(成功:, result);},(error) {// 处理失败情况console.error(失败:, error);});catch() 方法catch()方法专门用于处理 Promise 被拒绝的情况。实例myPromise.then((result) {console.log(成功:, result);}).catch((error) {console.error(失败:, error);});finally() 方法finally()方法无论 Promise 最终状态如何都会执行。实例myPromise.then((result) {console.log(成功:, result);}).catch((error) {console.error(失败:, error);}).finally(() {console.log(操作完成);});Promise 的链式调用Promise 的一个强大特性是可以链式调用多个异步操作。实例doFirstThing().then((result) doSecondThing(result)).then((newResult) doThirdThing(newResult)).then((finalResult) {console.log(最终结果:, finalResult);}).catch((error) {console.error(链中某处出错:, error);});Promise 的静态方法Promise.all()等待所有 Promise 完成或任意一个 Promise 失败。实例Promise.all([promise1, promise2, promise3]).then((results) {// results 是一个包含所有 Promise 结果的数组console.log(results);}).catch((error) {// 任一 Promise 失败就会进入这里console.error(error);});Promise.race()返回最先完成无论成功或失败的 Promise 的结果。实例Promise.race([promise1, promise2, promise3]).then((result) {// 使用最先完成的 Promise 的结果console.log(result);}).catch((error) {// 如果最先完成的 Promise 是失败的console.error(error);});Promise.resolve() 和 Promise.reject()快速创建已解决或已拒绝的 Promise。实例const resolvedPromise Promise.resolve(立即解决的值);const rejectedPromise Promise.reject(立即拒绝的原因);实际应用示例示例 1: 使用 Promise 处理 AJAX 请求实例function fetchData(url) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest();xhr.open(GET, url);xhr.onload () {if (xhr.status 200) {resolve(xhr.response);} else {reject(new Error(xhr.statusText));}};xhr.onerror () reject(new Error(网络错误));xhr.send();});}fetchData(https://api.example.com/data).then((data) {console.log(获取数据成功:, data);}).catch((error) {console.error(获取数据失败:, error);});示例 2: 使用 Promise 链处理多个异步操作实例function getUser(userId) {return fetch(/users/${userId});}function getPosts(userId) {return fetch(/users/${userId}/posts);}getUser(123).then((user) {console.log(获取用户信息:, user);return getPosts(user.id);}).then((posts) {console.log(获取用户帖子:, posts);}).catch((error) {console.error(操作失败:, error);});常见问题与最佳实践1. 避免 Promise 嵌套错误做法回调地狱的 Promise 版本实例doFirstThing().then((firstResult) {doSecondThing(firstResult).then((secondResult) {doThirdThing(secondResult).then((thirdResult) {console.log(thirdResult);});});});正确做法使用链式调用实例doFirstThing().then(doSecondThing).then(doThirdThing).then((finalResult) {console.log(finalResult);});2. 总是处理拒绝情况忘记处理 Promise 的拒绝会导致未捕获的 Promise 拒绝错误。总是使用.catch()或try/catch在 async/await 中来处理错误。3. Promise 不是可取消的一旦创建Promise 就无法取消。如果需要取消功能可以考虑使用 AbortController 或其他模式。4. 回答常见的问题FAQQ: then、catch 和 finally 序列能否顺序颠倒A: 可以效果完全一样。但不建议这样做最好按 then-catch-finally 的顺序编写程序。Q: 除了 then 块以外其它两种块能否多次使用A: 可以finally 与 then 一样会按顺序执行但是 catch 块只会执行第一个除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。Q: then 块如何中断A: then 块默认会向下顺序执行return 是不能中断的可以通过 throw 来跳转至 catch 实现中断。Q: 什么时候适合用 Promise 而不是传统回调函数A: 当需要多次顺序执行异步操作的时候例如如果想通过异步方法先后检测用户名和密码需要先异步检测用户名然后再异步检测密码的情况下就很适合 Promise。Q: Promise 是一种将异步转换为同步的方法吗A: 完全不是。Promise 只不过是一种更良好的编程风格。Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程A: 当你又需要调用一个异步任务的时候。Promise 与 async/awaitES2017 引入了 async/await它基于 Promise 并提供更直观的语法来处理异步操作。实例async function fetchData() {try {const user await getUser(123);const posts await getPosts(user.id);console.log(用户帖子:, posts);} catch (error) {console.error(获取数据失败:, error);}}虽然 async/await 更易读但理解 Promise 的基本概念仍然很重要因为它是 async/await 的基础。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧