执行上下文也分两种 全局执行上下文和函数执行上下文；当 JavaScript 程序开始执行时就已经创建了全局上下文；而函数执行上下文是在每次调用函数时，就会创建一个新的 页面构建完了之后变进入第二个阶段...如果去掉包裹函数表达式的括号，把立即调用作为一个独立语句 function() {}(3)，JavaScript 开始解析时便会结束，因为这个独立语句以 function 开头，那么解析器就会认为它在处理一个函数声明...我们在给函数传参数的时候，除了有我们显示传入的实参之外，其实还包含了两个隐士参数 this 和 arguments。this 表示被调用函数的上下文(在什么环境下调用，就指向什么）。...无论何时在哪调用，只和声明的地方有关系（定义时的函数继承上下文） 闭包：允许函数访问并操作函数外部的变量，windows 就是一个最大的闭包（回调函数是另一种常见的使用闭包的情景） promise 模拟一个请求...， axios 实现原理，应该就是用他，我并没有阅读过源码我猜测的。
⏳ pending: promise 暂时还没有被解决也没有被拒绝，仍然处于 pending 状态 好吧，这一切听起来很棒，但是什么时候 promise 的状态是 pending、fulfilled 或...让我们尝试看看当我们调用 resolve 或 reject 方法时得到的日志。 在我的例子中，把 resolve 方法叫做 res，把 reject 方法叫做 rej。 太好了！...当我们调用 resolve 方法时，promise 的状态是 fulfilled。 当我们调用 reject 方法时，promise 的状态是 rejected。...让我们看下当我们在终端运行这段代码时会发生什么？ 非常酷！就像我们所期望的一样，promise 得到了解析数据后的值。 但是现在呢？我们不关心整个 promise 对象，我们只关心数据的值！...当我们等待 await 后的值返回一个 resolved 的 promise 时，通过 await 关键字，我们可以暂停异步函数。
//.then(2) 返回一个新的 Promise，它的回调函数不会被调用，因为前一个 Promise 被拒绝了。...//.then(res => { return 3 }) 返回一个新的 Promise，它的回调函数也不会被调用，因为前一个 Promise 被拒绝了。...//.catch(error => { return 4 }) 返回一个新的 Promise，它的回调函数被调用并返回数字 4（作为一个被解决的 Promise）。...//.then(console.log) 返回一个新的 Promise，它的回调函数被调用并打印数字 4。...//4、接着创建 cls 对象时，同样会调用父类 cls 的构造函数，执行父类的 show 方法，输出 “yoo”我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
即使这个函数在语法上返回了一个非 promise 的值，加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。...然后 await 等到这两个方法中的某个被调用（在例子中发生在（*）的那一行），再处理得到的结果。...---- async/await 和 promise.then/catch 当我们使用 async/await 时，几乎就不会用到 .then 了，因为为我们await 处理了异步等待。...这通常更加方便（当然不是绝对的）。 但是当我们在顶层代码，外面并没有任何 async 函数，我们在语法上就不能使用 await 了，所以这时候就可以用 .then/catch 来处理结果和异常。...---- ---- async/await 可以和 Promise.all 一起使用 当我们需要同时等待多个 promise 时，我们可以用 Promise.all 来包裹他们，然后使用 await：
当我们调用 resolve 时： [[PromiseState]] 被设置为 “已实现”（fulfilled）。...当 promise resolve 时，该处理程序会被添加到微任务队列中，并可访问 promise 解析时的值。...当 promise 解析时，这个处理程序接收到 [[PromiseResult]] 的值作为其参数，然后将其推送到 Microtask Queue 微任务队列。...当 Promise 被拒绝时，这个回调会被添加到微任务队列。 到目前为止，我们只是在执行函数内直接调用 resolve 或 reject。...虽然这是可能的，但它并没有充分利用 Promise 的全部功能（和主要目的）！ 在大多数情况下，我们希望在稍后的某个时间点（通常是异步任务完成时）进行 resolve 或 reject。
首先，array 的 sort 方法对原始数组进行排序，并返回对该数组的引用。这意味着当你调用 arr2.sort() 时，arr2 数组内的对象将会被排序。 当你比较对象时，数组的排序顺序并不重要。...原型继承 在下面的代码中，有一个 Dog 构造函数。我们的 dog 显然有 speak 这个操作。当我们调用 Pogo 的 speak 时，会输出什么？...Promise.all 的解决顺序 在这个问题中，我们有一个 timer 函数，它返回一个 Promise ，该 Promise 在随机时间后解析。...'b', 'c'].map 被调用时，将会调用 this' 值为 '['a'，'b'，'c'] 的 Array.prototype.map。...Function.prototype.bind 会将函数的 this 绑定到第一个参数（在本例中为 [1, 2, 3]），用 this 调用Array.prototype.map 将会导致这些项目被迭代并输出
它允许我们以更加同步和可读的方式编写异步代码，从而更容易处理 Promise 和执行非阻塞操作。当调用异步函数时，它会返回一个 Promise，该 Promise 解析为函数的最终结果。...只是调用 让我们先来看一下，当我们简单地调用另一个异步函数而不正确处理返回的 Promise 时，异步函数的行为。...因为我们没有 await 或者 return 异步函数 waitAndMaybeReject() 的结果，因此我们对它没有作出任何反应，像这样的代码通常都是错误的。...await 的本质： • 异步代码同步：await 通过阻塞执行，直到等待的 Promise 被解析或拒绝，简化了异步代码的使用。...retrun await 的本质： • 一致的值：return await 可确保函数始终一致的返回 Promise 的解析值，即使在没有严格必要的情况下也是如此，从而确保返回数据类型的一致性。
，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解; 那么这里我从一个实际的例子来作为切入点: 我们调用一个函数，这个函数中发送网络请求(我们可以用定时器来模拟); 如果发送网络请求成功了...承诺、许诺 、期约; 当我们需要给予调用者一个承诺:待会儿我会给你回调数据时，就可以创建一个Promise的对象; 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor...; 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject; 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数; 当我们调用reject...): 初始状态，既没有被兑现，也没有被拒绝; 当执行executor中的代码时，处于该状态; 已兑现(fulfilled): 意味着操作成功完成; 执行了resolve时，处于该状态; 已拒绝(...: // > 第一个回调函数, 会在Promise执行resolve函数时, 被回调 // > 第二个回调函数, 会在Promise执行reject函数时, 被回调 fooPromise.then((
方法中传入多个 Promise时，会进行 优先 解析。...使用 typeof操作符时, 操作值 x没有被定义：因为我们在 x声明块的外部，无法调用它。这就意味着 x未定义。...当我们尝试调用一个不存在的函数时 TypeError异常会被抛出。...当我们调用 game.next("Yes").value时，先前的 yield 的返回值将被替换为传递给 next()函数的参数 "Yes"。...await仍然需要等待promise的解决：当我们调用 getData()并将其赋值给 data，此时 data为 getData方法返回的一个挂起的promise，该promise并没有解决。
包装 fetch 逻辑 如上所述，当我们的组件正在加载数据或失败时，需要抛出异常，但是一旦成功解决了Promise，就可以简单地返回响应。...的状态，然后返回一个名为“read”的函数，稍后我们将在组件中调用它。...不同于习惯中在组件中通过useEffect钩子调用 fetch 的做法，这一次我们要直接在组件开始时（放在任何 hooks 之外），使用我们在包装器中导出的read方法来调用请求，因此我们的Names组件大概是这个样子的...，当调用组件时，read()函数将开始抛出异常，直到完全解析完成；其后，会继续执行其余代码，在此例中也就是继续 render。...或其他什么你需要的自定义组件。 结论 长时间使用useEffect以实现相同的结果后，当我第一次看到 Suspanse 这种用法时，我对这种新方法有些怀疑。包装获取库的整个过程有点让人生疑。
异步函数能够使得（我们）编写异步JavaScript更加容易，但是，它自带一套陷阱，对初学者很不友好。 在这个由两部分组成的文章中，我想分享下你需要了解的有关异步函数的内容。...await关键字 当你调用promise时，你会在then中处理下一步，如下： const getOne = async _ => { return 1 } getOne() .then...一旦解析完promise，它就会返回参数传递给then调用。...} } test() 还有更好的方法。 我们知道异步函数总是返回一个promise。当我们调用promise时，我们可以在catch调用中处理错误。...如果你传入1000到sleep函数，JavaScript将等待一秒才能解析promise。
resolve or reject at some time in the future" 事实上，上述的解释并没有让我对Promise有更加清晰的认识，反而让我觉得它比较深不可测。...•fulfilled: 表示这个promise已经被resolved，一切正常，在这个promise内没有异常发生。...•pending: 表示当这个promise既没有被resolved也没有被rejected，那么它就一直是pending。...有趣的是，我让Jake Archibald校对这篇文章时，他实际上指出，在Chrome浏览器目前的状态显示为resolved，而不是fulfilled的错误。 ?...promise像我们所预期的那样正常返回了图像相关的解析数据。 但是接下来怎么办呢？
当我在麦当劳点一份汉堡套餐，收银员会给我一张收据，这个收据就是 Promise，代表我已经付过钱了，麦当劳会为我做一个汉堡套餐的承诺，我要通过收据来取这个汉堡套餐。...那么这个买汉堡得到的承诺会有以下 3 种状态： 等待状态：我刚下单，汉堡还没做好，这时我可以在等待汉堡时，同时做其他事情； 成功状态：汉堡做好了，通知我取餐； 失败状态：发现卖完了，通知我退款； 需要注意的是...； 在 promise 完成之前不能调用它； 它不能被多次调用； onRejected 要求如下： 必须在 promise 被拒绝后调用它，以 promise.reason 作为它的第一个参数； 在 promise...当 promise 完成，所有相应的 onFulfilled 回调必须按照它们的原始调用的顺序执行 then； 当 promise 被拒绝，所有相应的 onRejected 回调必须按照它们对 的原始调用的顺序执行...原因：在 new promise 时，promise2 还没有完成初始化。
，就会调用resolve函数，然后对应的promise的状态就变成fulfilled；当承诺没有实现的时候，就会调用reject函数，其状态变成了rejected。...3.当我们把 promise 一切部署好后，我们就得用到这个 promise 了。我们定义一个 testFn 函数来调用 promise 。...我们来看看MDN怎么说： onFulfilled 当Promise变成接受状态（fulfillment）时，该参数作为回调函数被调用（参考： Function）。...）时，该参数作为回调函数被调用（参考： Function）。...没有实现的时候，状态为rejected时被使用。
它就像操作结果的代理。 回调函数 在拥有JavaScript Promise之前，处理异步操作最优雅的方式是使用回调。当异步操作的结果就绪时，回调就是一个运行的函数。...then方法 当我们实例化一个Promise对象时，我们将得到一个未来可用数据的代理。在我们的例子中，我们期待从远程服务返回一些数据。那么，我们如何知道数据何时可用呢？...向下传递数据 当我们需要执行多个异步操作时，我们可能希望将一个异步调用的结果传递给Promise链中的下一个then，这样我们就可以对该数据进行处理。...Promise错误处理 我们已经知道，then函数接收两个回调函数作为参数，并且如果Promise被拒绝，第二个参数会被调用： promise.then((data) => { console.log...我发现上述代码比基于Promise的版本更容易解析。不过，我鼓励你熟悉async ... await语法，看看哪种最适合你。
但是他又如此重要，以致于当我们想要面试中高级岗位时，事件循环机制总是绕不开的话题。特别是ES6中正式加入了Promise对象之后，对于新标准中事件循环机制的理解就变得更加重要。这就很尴尬了。...每一个任务的执行顺序，都依靠函数调用栈来搞定，而当遇到任务源时，则会先分发任务到对应的队列中去，所以，上面例子的第一步执行如下图所示。...promise1入栈执行，这时promise1被最先输出 resolve在for循环中入栈执行 构造函数执行完毕的过程中，resolve执行完毕出栈，promise2输出，promise1页出栈，then...所以我下面弄了一个复杂一点的例子，再给大家解析一番，相信读懂之后，事件循环这个问题，再面试中再次被问到就难不倒大家了。...当我们在执行setTimeout任务中遇到setTimeout时，它仍然会将对应的任务分发到setTimeout队列中去，但是该任务就得等到下一轮事件循环执行了。
比如当我们调用 let g = gen() 时，会返回一个生成器函数，它拥有一个 next 方法。 之后当第一次调用 g.next() 方法时，会执行生成器函数 gen 。...需要额外注意的是，当我们第四次调用迭代器 g.next() 时，因为第三次 g.next() 结束时生成器函数已经执行完毕了。...总而言之，当我们为 next 传递值进行调用时，传入的值会被当作上一次生成器函数暂停时 yield 关键字的返回值处理。 自然，第一次调用 g.next() 传入参数是毫无意义的。...因为首次调用 next 函数时，生成器函数并没有任何执行自然也没有 yield 关键字处理。...在深入这段代码之前，我先告诉你所谓 Async 语法是如何被实现的结论： 在这之前，我们通过 Generator 和 Promise 解决异步问题时，需要将 Generator 函数额外使用 co 来包裹一层从而实现类似同步的异步函数调用
fetch()请求获取的内容是一个 Stream 对象。也就是说，当我们调用 json() 方法时，返回的仍是一个 Promise 对象，这是因为对 stream 的读取也是异步的。...Response类型当我们执行一个fetch请求时，响应的数据的类型response.type可以是“basic”, “cors” 或 “opaque”。...这些类型用来说明应该如何对待这些数据和数据的来源。当请求发起自同一个域时，响应的类型将会是“basic”，这时，对响应内容的使用将没有任何限制。...在使用JSON API时，我们需要检查每次请求响应的状态，然后解析成JSON对象。...使用promise，我们可以简单的将分析状态和解析JSON的代码放到一个单独函数里，然后当做promise返回，这样就是代码更条理了。
它注册了一个回调函数，当Promise解析并产生一个值时被调用。 你可以将多个回调添加到单个Promise中，即使在Promise解析（完成）后添加它们，它们也会被调用。...只有在操作成功时，才会调用解析处理器（使用then注册），并且拒绝会自动传播给由then返回的新Promise。当一个处理器抛出一个异常时，这会自动使then调用产生的Promise被拒绝。...为了明确地处理这种拒绝，Promise有一个catch方法，用于注册一个处理器，当Promise被拒绝时被调用，类似于处理器处理正常解析的方式。...它在调用时会产生一个Promise，当它返回（完成）时被解析，并在抛出异常时被拒绝。...如果我从一个函数中调用setTimeout，那么在调用回调函数时该函数已经返回。 当回调返回时，控制权不会回到调度它的函数。 异步行为发生在它自己的空函数调用堆栈上。
领取专属 10元无门槛券
手把手带您无忧上云
