js的 Promise / async和await

本文介绍了Promise的基本用法,展示了如何通过new Promise封装异步操作,并通过then处理成功和失败结果。同时,讲述了async/await如何简化异步流程控制,使代码更加直观。
const p1 = new Promise(function(resolve, reject) {
  ... some code

  if (res==1){
    resolve(value1);
  } else {
    reject(err1);
  }
});

p1.then(
    function(a){console.log(a)};

    function(a){console.log(a+a+a)
}


立即执行一个内容为【...some code】的异步函数,

如果【...some code】执行完后,res==1,则返回 value1,否则返回 err1

then 用于【监听】异步函数执行结果,异步函数执行完后,结果会被then监听到,

以上p1.then含义是:执行的最终状态是成功则打印value1,最终状态是失败则打印 err1err1err1
 

Promise 将【异步的过程】和 【对结果的处理】分离,可读性比call、callback方式高很多。表达逻辑更清晰。

tps://es6.ruanyifeng.com/?search=not&x=0&y=0#docs/promise

async和await

async关键字 声明这是一个异步函数,被调用时,不会堵塞主线程。(可以理解为浏览器会创建子线程来处理,我们假设这个子线程叫A1)

子线程A1中,调用一个异步函数fn2,浏览器会创建它的子线程A11来执行fn2。fn2不会堵塞A1。

但在A1的代码中,调用fn2时加上await关键字,那么fn2就会堵塞A1了,等fn2返回结果后,再执行其后面的代码。

 

https://segmentfault.com/a/1190000007535316  理解 JavaScript 的 async/await

JavaScript 中的异步编程是处理非阻塞操作的核心机制,尤其在处理网络请求、定时任务或文件操作时尤为重要。Promise `async/await` 是现代 JavaScript 中用于简化异步代码结构的主要工具,它们提供了比传统回调函数更清晰、更易维护的代码结构。 ### Promise 的基本概念 Promise 是一个表示异步操作最终完成或失败的对象。它有三种状态: - **Pending(进行中)**:初始状态,既没有被兑现,也没有被拒绝。 - **Fulfilled(已成功)**:表示操作成功完成。 - **Rejected(已失败)**:表示操作失败。 Promise 提供了 `.then()` 来处理成功状态,`.catch()` 来处理失败状态,同时支持链式调用,使得多个异步操作可以按顺序执行或组合处理。 例如,一个返回 Promise 的函数如下: ```javascript function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => resolve("数据已获取"), 1000); }); } ``` 调用该函数并处理结果: ```javascript fetchData() .then(data => console.log(data)) // 输出: 数据已获取 .catch(error => console.error(error)); ``` ### async/await 的使用 `async/await` 是基于 Promise 的语法糖,使异步代码看起来更像同步代码,从而提高可读性可维护性。 定义一个 `async` 函数会自动返回一个 Promise。在 `async` 函数内部,可以使用 `await` 关键字等待一个 Promise 完成,并获取其结果。 例如: ```javascript async function main() { try { const data = await fetchData(); console.log(data); // 输出: 数据已获取 } catch (error) { console.error("发生错误:", error); } } ``` ### Promiseasync/await 的结合使用 `async/await` 可以与 `Promise.all()` 等组合使用,以处理多个异步操作。例如: ```javascript async function handleMultipleRequests() { try { const [result1, result2] = await Promise.all([fetchData(), fetchData()]); console.log(result1, result2); } catch (error) { console.error("其中一个请求失败:", error); } } ``` ### 错误处理机制 在 `async/await` 中,错误处理通常通过 `try...catch` 语句来完成。如果 `await` 后的 Promise 被拒绝,控制权会立即转移到 `catch` 块中,类似于同步代码中的异常捕获。 此外,也可以在链式调用中使用 `.catch()` 处理未捕获的异常,确保程序的健壮性。 ### 异步编程的优势 相比传统的回调函数方式,Promise `async/await` 提供了更好的可读性可维护性,避免了“回调地狱”问题。它们使得异步逻辑更清晰、更易于调试测试。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值