首页 > 编程语言 >JavaScript Promises, async/await

JavaScript Promises, async/await

时间:2022-12-07 14:11:22浏览次数:66  
标签:异步 Promises await JavaScript resolve Promise catch async

new Promise() 的时候,传一个 executor 给 Promise.

let promise = new Promise(function(resolve, reject) {
  // this function will executes immediately
})

这个函数会立刻被执行,在 executor 里面调用了 resolve 之后, Promise 变为 fulfilled,在 executor 里面调用了 reject 之后,Promise 变为 rejected。如果 resolve 和 reject 都还没被调用,Promise 的状态是 pending(等待结果)。.then/.catch/.finally都是异步的,JavaScript 是单线程模型,所有的异步任务都将被放到任务队列里,等主线程的所有的代码执行完然后才执行任务队列里的任务。JavaScript 是单线程,也就是所有的异步代码都会等到 JS 文件里面的代码都执行完了才执行。

setTimeout() 是异步的,不会阻塞函数执行,所以 let promise 立刻得到了 Promise 对象。Promise 的 state 和 result 都是内部的,不能直接访问。要拿到 result, 就要使用 .then 或者 .catch 方法,传一个接受结果的函数给他们。Promise.resolve() 就相当于 new Promise(resolve => resolve())Promise.reject() 相当于是 new Promise((resolve, reject) => reject())

.then.catch 都是返回一个 Promise 对象,而 Promise 对象有 then 和 catch 方法,所以可以链起来。这个 undefined 是 console.log(r) 的输出。

在 then 里面也可以 return new Promise(...)1。对于错误处理,executor 外部有一个隐式的 try...catch,也就是说 executor 执行流的异常会被后来最近的 .catch() 调用捕获到,没有捕获的的错误最后会被抛到 window,或者全局。值得注意的是 .catch() 处理异常以后也会返回一个 Promise 对象。

async 意味着函数一定返回一个 Promise,如果函数正常 return,return 的结果在一个 resolved Promise 里面。.then() 里面可以返回一个 Promise,在 async 函数里面也可以显式的返回一个 Promise。

await 不是单纯的等待,不是阻塞的等待,literally suspends the function execution,实际上是挂起这个函数的执行,或者说暂停这个函数的执行,等 Promise settle 也是就是等 Promise 有结果之后,然后 resume(恢复)执行。这就有点像是生成器的 yield,从上次打断的地方恢复执行。await 挂起/暂停的时候会CPU执行其他的异步任务,await 有等待的意思,不过实际上还有让步,会将执行权让给其他的任务,等其他的任务执行完或者其他的任务让步以后,然后继续之前 await 的地方执行。具体会运行到哪个异步任务,得看当时任务队列里面有什么任务在等待执行。

Let’s emphasize: await literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn’t cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.

await 会去调用.then(),获取 Promise 的结果。async/await 使得调用异步函数,不需要写回调了,也不需要一直 .then,异步代码就像普通的代码一样。

初学 JavaScript 的 async/await,以为 await 就是阻塞的等待,后来了解到协程,发现 async/await 是一个比较通用的关于协程的关键字。这其实就是 JavaScript 的协程,可以实现单线程的并发。

标签:异步,Promises,await,JavaScript,resolve,Promise,catch,async
From: https://www.cnblogs.com/fnmain/p/16961646.html

相关文章

  • JavaScript中 FileReader 对象详解
    1.概念:FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区即buffer)的内容,使用File或Blob对象指定要读取的文件或数据。2.属性:FileR......
  • javaScript_01_按照key排序
     javaScript_01_按照key排序前言Object.keys()与Objetc.values()实现按key排序前言最近做一个小程序项目需要用到腾讯地图的api,在计算sig的时候需要将参数按照......
  • javascript - 判定输入浮点数是否合法
    方法借鉴其他作者,我进行了错误汇总并完善,记录以备后用;首先建立一个功能函数,用于检查输入浮点数是否合法:functionCheckValueError(theFloat){}//返回True表示错误,返回F......
  • JavaScript入门⑦-DOM操作大全
    JavaScript入门系列目录JavaScript入门①-基础知识筑基JavaScript入门②-函数(1)基础{浅出}JavaScript入门③-函数(2)原理{深入}执行上下文JavaScript入门④-万物皆......
  • JavaScript中的中间排序算法
    英文|https://medium.com/@gianfranconuschese/intermediate-sorting-algorithms-in-javascript-4ec8b641b32翻译|web前端开发(ID:web_qdkf)最近,我介绍了一些使用JavaScri......
  • JavaScript与jQuery基础入门到放弃
    JavaScript与jQuery基础入门到放弃引言:-BOM操作-DOM操作-jQuery类库BOM操作BOM(BrowserObjectModel)指浏览器对象模型,使JavaScript有能力与浏览器交互......
  • JavaScript——输入框、计时器
    JavaScript——输入框、计时器<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <bodyonload="get_time()"> <!--<formaction......
  • JavaScript基础2
    今日内容概要BOM操作DOM操作jQuery类库今日内容详细BOM操作window对象BOM(BrowserObjectModel)是指浏览器对象模型它使JavaScript有能力与浏览器进行'对话'W......
  • python之路43 JavaScript语法BOM与DOM jQuery对比
    前戏到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互,我们......
  • JavaScript(二)
    ❤️‍JavaScript(二)BOM操作DOM操作jQuery类库❤️‍BOM操作BOM(BrowserobjectModel)是指浏览器对象模型,它的功能就是让javascrip能和浏览器进行“交流对话”;操作浏览器......