为什么函数getSafestCountriesNames()在我调用它时会返回promise{pending}，而当我使用async/await时它会返回undefined？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

惊艳！可视化的 js：动态图演示 Promises & AsyncAwait 的过程！

对于 Promise ，您为什么要使用它，它在底层是如何工作的，以及我们如何以最现代的方式编写它呢？介绍在书写 JavaScript 的时候，我们经常不得不去处理一些依赖于其它任务的任务！...我们终于知道如何摆脱 pending 状态和 undefined 值了！当我们调用 resolve 方法时，promise 的状态是 fulfilled。...我们现在能够创建隐式地返回一个对象的异步函数，而不是显式地使用 Promise 对象！这意味着我们不再需要写任何 Promise 对象了。...尽管 async 函数隐式的返回 promise 是一个非常棒的事实，但是在使用 await 关键字的时候才能看到 async 函数的真正力量。...当我们等待 await 后的值返回一个 resolved 的 promise 时，通过 await 关键字，我们可以暂停异步函数。

2.7K1 0

动图学JS异步: Promises & AsyncAwait

有趣的是，我让Jake Archibald校对这篇文章时，他实际上指出，在Chrome浏览器目前的状态显示为resolved，而不是fulfilled的错误。 ?...Async/Await ES7在JavaScript中引入了一个新的方法来添加异步行为，并且它让promise使用起来更加容易了！...我们通过引入async、await关键词，我们可以创建一个async函数,这个函数会隐式返回一个promise。但是...我们接下来该怎么办呢？?...尽管事实上async函数隐式返回一个promise对象是非常伟大的功能，但是真正意义上是await关键字让async发挥了作用。...通过await关键字我们可以暂停一个异步函数，我们可以分配一个变量给await resolved状态的promise，就像之前我们使用promise.then方法回调那样，我们就可以得到一个resoled

1.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

面试官：为什么Promise中的错误不能被trycatch？

前言之前我写过一篇文章，讨论了为什么async await中的错误可以被try catch，而setTimeout等api不能，有小伙伴提出之前面试被面试官问过为什么Promise的错误不能try catch...当Promise进入fulfilled状态时会调用此函数 catch 当Promise进入rejected状态时会调用此函数 finally当Promnise进入settled状态时会调用此函数（无论fulfilled...，默认就返回了undefined，这会导致后面的then里面因为返回了undefined的someProperty而报错。...finally里面返回的值，主要有两方面： finally主要用来做一些清理操作，如果需要返回值应该使用then 没有return的函数、只有return的函数、以及return undefined的函数...可以实现统一的同时处理多个Promise的逻辑而且，我在本文开头提到过，回调地狱有两个问题是：向已经完成的操作添加回调并没有统一的标准很难向某个操作添加多个回调这些都被Promise的标准解决了

2.2K3 0

「硬核JS」图解Promise迷惑行为｜运行机制补充

我们可以在执行then方法时如果还在等待态 pending，就把回调函数临时寄存到队列（就是一个数组）里，当状态发生改变时依次从数组中取出执行就好了。...我们之前的手写实现，当使用 Promise 返回一个新的 Promise 时，内部会调用它的 then 方法从而产生一个新的微任务，其回调入队，后面微任务队列执行到这个回调时，拿到传入的值作处理后再 resolve...return ，也就是返回的是一个 undefined，由于是 async 吗，最终函数是返回一个值为 undefined 的 Promise 对象，但现在我们在 async2 函数中返回了一个 Promise...运行 async1() ，函数 async1 开始执行，输出 1，遇到 await，执行 async2，先输出 3，由于async2 中返回的是 Promise 对象，解析时产生的第一个微任务入队。...接着，执行 async2 中返回 Promise 对象解析时所产生的第二个微任务，无输出，然后 async1 函数中 await 下面的代码作为微任务入队，返回 Promise 对象解析时所产生的第二个微任务出队

2.7K3 0

PromiseasyncGenerator实现原理解析

笔者刚接触async/await时，就被其暂停执行的特性吸引了，心想在没有原生API支持的情况下，await居然能挂起当前方法，实现暂停执行，我感到十分好奇。...在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。在finally之后，还可以继续then。...同样地，开头我们点一下async/await的使用意义。.../await看起来其实已经很相似了，它们都提供了暂停执行的功能，但二者又有三点不同： async/await自带执行器，不需要手动调用next()就能自动执行下一步 async函数返回值是Promise...对象，而Generator返回的是生成器对象 await能够返回Promise的resolve/reject的值我们对async/await的实现，其实也就是对应以上三点封装Generator 1.自动执行

2.1K3 0

JavaScript 常见面试题速查

可以通过一些方法获得安全的 undefined 值，如 void 0。在使用 typeof 进行判断时，Null 类型会返回 object，这是一个历史遗留问题。...使用 Promise 可以将嵌套的回调函数转为链式调用使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确 Generator 可以在函数的执行过程中，将函数的执行全转移出去...async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，当然应该用原来的方式： then() 链来处理这个 Promise 对象。...}; 如果 async 函数没有返回值，会返回 Promise.resolve(undefined)。...在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且不会阻塞后面的语句，这和普通返回 Promise 对象的函数没有区别。

9033 0

「一次写过瘾」手写Promise全家桶+Generator+asyncawait

所以我们需要定义 resolve() 和 reject() 函数。初始状态为 PENDING，在执行时可能会有返回值 value，在拒绝时会有拒绝原因 reason。...根据第 4 条、第 5 条规则，需要根据 Promise 的状态来执行对应的回调函数。在 PENDING 状态时，需要等到状态落定才能调用。...我们需要调用 Promise 在构造时的函数 resolve() 和 reject() 来改变 Promise 的状态。...3.更广的适用性 4.返回值是 Promise async/await 做的事情就是将 Generator 函数转换成 Promise，说白了，async 函数就是 Generator 函数的语法糖，...编译成了什么样子[11] 通俗浅显的理解Promise中的then[12] 手写async await的最简实现（20行）[13] ❤️爱心三连击 1.看到这里了就点个在看支持下吧，你的「在看」是我创作的动力

1.1K2 0

JavaScript Promise

，这时就可以使用回调函数让它像异步编程语言一样工作。 ...只有异步返回时才可以改变其状态，因此我们收到的 Promise 过程状态一般只有两种：pending->fulfilled 或者 pending->rejected。...ReferenceError: value1 is not defined at ... /* ---打印结果--- */ 另外当我们需要在方法中等待 Promise 返回时，需要给方法添加 async...在 Promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。...所以使用 Promise.any 来获取多台服务器数据时会更合理。优雅的进行异常处理详解之前刷视频有看到一些小问题：使用多个 await 时，前一个出现异常，如何不影响后续执行？

7911 0

揭开 HMR 面纱，了解它在 client 端的实现

import('/foo.js') console.log(fooModule) if (import.meta.hot) { import.meta.hot.accept() } 当我们在模块中使用了...fetchUpdate 最后返回一个函数，通过 queueUpdate 保证回调函数的执行顺序跟 http 请求的一致： let pending = false let queued: Promise而不一致 */ async function queueUpdate(p: Promise void) | undefined>) { //...pending) { pending = true await Promise.resolve() pending = false const loading = [.....加载 @vite/client 会初始化客户端的 websocket 实例，监听服务端的消息，还定义 createHotContext 函数，并在每个使用了 HMR API 的模块中引入并调用该函数，这也是为什么我们能在模块中使用

7883 0

V8引擎Promise源码全面解读（深度好文）

在调用 resolve 之前 reactions_or_result 其实是一个链表，存储的是当前 Promise 的所有处理函数，因为 promise 在使用 then 收集依赖时是将最新的依赖存放到链表头部...注1 HostPromiseRejectionTracker 在两种情况下被调用：当一个 Promise 在没有任何处理函数的情况下被调用 reject 时，调用它并且第二个参数传递 “reject”...当第一次为 rejected 状态的 Promise 绑定处理函数时，调用它并且第二个参数传递 “handle”。...所以如果你在浏览器执行这段代码，请将setTimeout的时间设置长一点，这样效果更加容易肉眼可见。题目四为什么 async1 end 输出在 promise3 之后？..."); }); console.log("script end"); 感谢评论区贡献的题目题解这个问题，这里面涉及 async 中使用 await 会产生多个Promise链路的问题以及 resolve

9681 0

聊聊JavaScript的Asynchronous

[async await啊] 需要异步异步进程是需要时间来执行的进程。它必须等到工作完成才能返回一些东西。...例如，函数 fetchData 为数据赋值（例如：从服务器获取数据）并，displayData 显示获取的数据： [示例方法] 当我们运行这个代码片段时，我们得到的是“undefined”而不是实际数据...Async Callback 回调函数是作为参数传递给另一个函数的函数，目的是在稍后“调用”它。...以 async 为前缀的函数总是返回一个 Promise。 [async] 我们可以通过以下方式resolve或reject异步函数中的Promise： [async] 那么，why await呢？...Await 与 async 一起使用，以确保我们等到 Promise 解决（resolve或reject）。 Await 仅在异步函数中使用时有效。

9393 0

了解关键区别：await vs return vs return await

使用异步函数时，我们会遇到三个重要的关键字：await 、return、return await。在本文中，我们将探讨这些关键字之间的差异，并讨论何时使用每个关键字。...在深入探讨细节之前，让我们先阐明一下异步函数的用途。异步函数是一种特殊类型的函数，可以使用 await 关键字。...它允许我们以更加同步和可读的方式编写异步代码，从而更容易处理 Promise 和执行非阻塞操作。当调用异步函数时，它会返回一个 Promise，该 Promise 解析为函数的最终结果。...; } 它会返回一个等待一秒的 Promise，然后 50% 的几率以 "yay" 表示，或以错误拒绝，让我们以几种微妙的方式来使用它。...只是调用让我们先来看一下，当我们简单地调用另一个异步函数而不正确处理返回的 Promise 时，异步函数的行为。

8661 0

Vue3，用组合编写更好的代码：Async Without Await 模式(44)

这是一种在组合中编写异步代码的方法，而不像通常那样令人头疼。无等待的异步用组合API编写异步行为有时会很麻烦。所有的异步代码必须在任何反应式代码之后的设置函数的末端。...当setup函数运行到一个await语句时，它将返回。一旦它返回，该组件就会被挂载，并且应用程序会像往常一样继续执行。...相反，只有在异步代码完成，setup 函数完成执行后，它才会存在。然而，有一种方法可以编写异步组件，可以在任何地方使用，而不需要这些麻烦。...当我们停止并等待execute方法中的 promise 时，执行流立即返回到useMyAsyncComposable函数。然后它继续执行execute()语句并从可组合对象返回。...现在来看看另一个可组合，我认为它有一个迷人的实现方式。 useAsyncQueue 如果传给useAsyncQueue一个 promise 函数数组，它会按顺序执行每个函数。

1.7K2 0

Promise面试题_研究生英语面试常见问题及回答技巧

当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。...实例：当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的： new Promise((resolve, reject) => { console.log('new Promise...之后再使用Promise.all来执行这个函数，结果如下： 1 2 3 [1, 2, 3] 执行的时候，看到一秒之后输出了1，2，3，同时输出了数组[1, 2, 3]，三个函数是同步执行的，并且在一个回调函数中返回了所有的结果...') 输出结果为： async1 start async2 start async1 end 首先执行函数中的同步代码async1 start，之后碰到了await，它会阻塞async1后面代码的执行，...start async1 start promise1 script end 这里需要注意的是在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，所以在

4673 0

JS如何返回异步调用的结果？

在使用它的，需要调用它的then方法才能取得数据（在有数据返回的时候）。...ES2017：使用async/await语法关键字过多的“紧随”风格的then方法调用及catch方法调用，让代码的前后逻辑不清晰；当我们阅读这样的代码时，并不是从上向下瀑布式阅读的，而是时而上、时而下跳动着阅读的...当我们使用这种编程模式的时候，一定不要在主线程上去await一个Promise，可以发起异步操作，让异步操作像葡萄一样挂在主线程上，但不能等待它们返回了再往下执行。...小结在JS中处理异步调用的结果，最佳实践就是“异步转同步”：使用Promise + async/await语法关键字。...在这里async总是与await成对出现，一个async函数总是返回一个Promise，一个await关键字总是在尝试“解开”一个Promise，结局要么等到有价值的数据，要么异步出现异步，什么也没有等到

7.2K4 0

Promise、Generator、Async 合集

，所以（yield（x+1））执行后的值是undefined，所以在第二次执行a.next()是其实是执行的2*undefined，所以值是NaN，所以下面b的例子中，第二次执行b.next()时传入了...适用性更广：co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即...而async/await又是Generator函数的语法糖。...Promise的内部错误使用try catch捕获不到，只能只用then的第二个回调或catch来捕获，而async/await的错误可以用try catch捕获Promise一旦新建就会立即执行，不会阻塞后面的代码...，而async函数中await后面是Promise对象会阻塞后面的代码。

4800 0

JS高阶（一）Promise

对象用来封装一个异步操作并可获取其成功/失败的值；为什么要使用Promise？...指定回调函数的方式更加灵活旧：必须在启动异步任务前指定 promise：启动异步任务=>返回promise对象=>给promise对象绑定回调函数（甚至可以在异步任务结束后指定多个）支持链式调用，...-> 上一个then成功但返回了undefined }); promise 异常穿透当使用 promise 的 then 链式调用时，可以在最后指定失败的回调；在前部出现的所有异常都会穿透至最后的失败回调中...链当使用 promise 的 then 链式调用时，在中间中断，不再调用后面的函数；方法：在回调函数中返回一个状态为 pending 的 promise 对象； let p = new Promise...(e); } } main(); 5.9.4 注意事项 await 必须写在 async 函数中，但 async 函数中可以没有 await；如果 await 的 promise 失败了，就会抛出异常

2.8K1 0

js异步编程面试题

：嵌套函数存在耦合性，一旦有改动，就会牵一发而动全身嵌套函数一多就很难处理错误当然，回调函数还存在着别的缺点，比如不能使用try catch捕获错误，不能直接return。...，接下来就让我为你逐行代码分析原因首先 Generator 函数调用和普通函数不同，它会返回一个迭代器当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回...5 + 1 = 6当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。...')})当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的new Promise((resolve, reject) => { console.log('new Promise')...{: "1"}async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用async

8073 0

如何写出一个惊艳面试官的 Promise【近 1W字】前言源码1.Promise2.Generator3.async 和 await4.Pro

1.4.2 中级版 1.由于 then 方法支持多次调用，我们可以维护两个数组，将每次 then 方法注册时的回调函数添加到数组中，等待执行在初级的基础上加入成功回调函数队列和失败回调队列和then方法...和 await 3.1 async作用 1.async 函数返回的是一个 Promise 对象在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve(...4.所以这就是await必须用在async的原因，async刚好返回一个Promise对象，可以异步执行阻塞 3.3 async和await结合作用 1.主要是处理Promise的链式回调或函数的地狱回调...co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而await后面可以是任意表达式，都会返回一个Promise对象 // Thunk函数:是能将执行结果传入回调函数，并将该回调函数返回的函数...Promise，而Generator返回 Iterator 4.async 函数就是 Generator 函数的语法糖 async就相当于Generator的*，await相当于yield，用法有很多相似之处

8844 0

JS--异步的日常用法

回调地狱的根本问题就是：嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身嵌套函数一多，就很难处理错误当然，回调函数还存在着别的几个缺点，比如不能使用 try catch 捕获错误，不能直接 return...，接下来就让我为你逐行代码分析原因首先 Generator 函数调用和普通函数不同，它会返回一个迭代器当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回...5 + 1 = 6当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。...)) // -> Promise {: "1"}async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套...async 使用async function test() { let value = await sleep()}async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise

6003 0

点击加载更多

惊艳！可视化的 js：动态图演示 Promises & AsyncAwait 的过程！

动图学JS异步: Promises & AsyncAwait

面试官：为什么Promise中的错误不能被trycatch？

「硬核JS」图解Promise迷惑行为｜运行机制补充

PromiseasyncGenerator实现原理解析

JavaScript 常见面试题速查

「一次写过瘾」手写Promise全家桶+Generator+asyncawait

JavaScript Promise

揭开 HMR 面纱，了解它在 client 端的实现

V8引擎Promise源码全面解读（深度好文）

聊聊JavaScript的Asynchronous

了解关键区别：await vs return vs return await

Vue3，用组合编写更好的代码：Async Without Await 模式(44)

Promise面试题_研究生英语面试常见问题及回答技巧

JS如何返回异步调用的结果？

Promise、Generator、Async 合集

JS高阶（一）Promise

js异步编程面试题

如何写出一个惊艳面试官的 Promise【近 1W字】前言源码1.Promise2.Generator3.async 和 await4.Pro

JS--异步的日常用法

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐