首页
学习
活动
专区
圈层
工具
发布

JS高阶(一)Promise

抽象表达: Promise是ES6中新增的规范; Promise是js中异步编程的新解决方案(旧方案采用函数回调); 具体表达: 从语法上说:Promise是一个构造函数; 从功能上说:Promise...指定回调函数的方式更加灵活 旧:必须在启动异步任务前指定 promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个) 支持链式调用,...函数:**定义内部成功时回调函数 value => {} **reject 函数:**定义内部失败时回调函数 reason => {} 说明: executor会在promise内部立刻同步调用,异步操作在执行器中执行...undefined }); promise 异常穿透 当使用 promise 的 then 链式调用时,可以在最后指定失败的回调; 在前部出现的所有异常都会穿透至最后的失败回调中; let p =...}); 中断 promise 链 当使用 promise 的 then 链式调用时,在中间中断,不再调用后面的函数; 方法:在回调函数中返回一个状态为 pending 的 promise 对象;

2.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vuex 2.0 源码分析

    这里做的事情很简单——给 Vue 的实例注入一个 $store 的属性,这也就是为什么我们在 Vue 的组件中可以通过 this.$store.xxx 访问到 Vuex 的各种数据和状态。...我们有必要知道 mutation 的回调函数的调用时机,在 Vuex 中,mutation 的调用是通过 store 实例的 API 接口 commit 来调用的,来看一下 commit 函数的定义:...我们有必要知道 action 的回调函数的调用时机,在 Vuex 中,action 的调用是通过 store 实例的 API 接口 dispatch 来调用的,来看一下 dispatch 函数的定义:...我们有必要知道 getter 的回调函数的调用时机,在 Vuex 中,我们知道当我们在组件中通过 this....在回调函数中,也是先通过 deepCopy 方法拿到当前的 state 的副本,并用 nextState 变量保存。

    2.3K30

    前端异步代码解决方案实践(二)

    随着 Promise/A+规范、ECMAScript规范 对 Promise API 制定执行落地,Javascript 异步操作的基本单位也逐渐从 callback 转换到 promise。...而 onResolved 回调中返回状态为 rejected对象。...resolve 函数简易版逻辑大概为:判断并改变当前 promise 状态,存储 resolve(..) 的 value 值。判断当前是否存在 then(..)...判断当前回调 cb 为空时,使用 deferred.promise 作为当前 promise 结合 value 调用后续处理函数继续往后执行,实现值穿透空处理函数往后传递。...在 JavaScript 语言中,Thunk 函数指的是将多参数函数替换为一个只接受回调函数作为参数的单参数函数(注:这里多参数函数指的是类似 node 中异步 api 风格,callback 为最后入参

    3.7K60

    使用 Node.js 的 Async Hooks 模块追踪异步资源

    Async Hooks 功能是 Node.js v8.x 版本新增加的一个核心模块,它提供了 API 用来追踪 Node.js 程序中异步资源的声明周期,可在多个异步调用之间共享数据,本文从最基本入门篇开始学习...(asyncId: number): void; after(回调函数调用后) 当回调处理完成之后触发 after 回调,如果回调出现未捕获异常,则在触发 uncaughtException 事件或域(...,但是它也会返回一个 Promise 所以还会被再次调用。...如下例所示,asyncLocalStorage.run() 函数第一个参数是存储我们在异步调用中所需要访问的共享数据,第二个参数是一个异步函数,我们在 setTimeout() 的回调函数里又调用了 test2...函数,这一系列的异步操作都不影响我们在需要的地方去获取 asyncLocalStorage.run() 函数中存储的共享数据。

    1.6K10

    鸿蒙开发:异步并发操作

    ,我们就可以继续执行下一个操作,相对于同步而言,异步操作可以同时处理多个任务,不会因为一个任务的耗时而影响其他任务的执行,从而提高了程序的并发处理能力‌,在实际的开发中,特别是应用启动初始化的时候,为了不阻塞程序...,异步的初始化往往是开发中的首选,在鸿蒙当中,我们如何进行异步的并发操作呢?...") 由于getMessage方法是一个异步操作,打印的情况如下,从以上的模拟代码,就印证了开头所说的,异步不回阻塞下面的程序执行。...,或多或少都提供了这种方式的操作,比如网络请求,比如数据库操作,等等,可以说司空见惯。...async函数是一个返回Promise对象的函数,用于表示一个异步操作,在其内部,可以使用await关键字等待一个Promise对象的解析,然后再返回其解析的结果,如果抛出异常,最终会传递给Promise

    55010

    【面试Vue全家桶】vue前端交互模式-es7的​语法结构?asyncawait

    网上一图,回调地狱:看到晕,使代码难以理解和维护。 ​ ? 前后端的交互是什么 前后端的交互就是前端的浏览器去调用后端的接口,拿到后端的数据,在做前端的处理,进行渲染。...$.ajax(url, { success(res) { }})// 在页面加载完毕后回调$(function(){// 页面结构加载完成}) 在JavaScript中,异步情况,第一种为定时任务,第二种为...回调地狱,多层嵌套请求问题,请求接口调用后台数据,有两种可能性,一种为成功回调,一种为失败回调,成功后写一下成功后的操作代码,失败后也要写一下失败后的操作代码。...的基本用法 首先实例化promise对象,构造函数中传递函数,该函数中用于处理异步任务,有两个参数,resolve和reject用于处理成功和失败的两种情况,并通过p.then获取处理结果。...async 函数返回一个Promise对象,因此 async 函数通过 return 返回的值,会成为 then 方法中回调函数的参数。

    1.9K10

    【愚公系列】2023年03月 其他-Web前端基础面试题(JS_高级_47道)

    闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在外部函数调用后被自动清除。...then 方法接受两个参数,第一个参数是成功时的回调,在 promise 由“等待”态转换到 “完成”态时调用,另一个是失败时的回调,在 promise 由“等待”态转换到“拒绝”态时调用。...当GET请求从后台页面返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用后台页面中的一个callback函数。...(2)如何存储 原始数据类型:直接存储在栈中,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。...引用数据类型:同时存储在栈和堆中,占据空间大,大小不固定。引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

    76520

    web前端面试都问什么-JS篇

    这证明了,函数addCounter中的局部变量counter一直保存在内存中,并没有在addCounter调用后被自动清除。...私有变量在java里使用private声明就可以了, 但是在js中还没有,但是我们可以使用闭包模拟实现。...这两个私有项无法在匿名函数外部直接访问,必须通过匿名包装器返回的对象的三个公共函数访问。 闭包的缺点 由于闭包会是的函数中的变量都被保存到内存中,滥用闭包很容易造成内存消耗过大,导致网页性能问题。...数组中常用的方法有哪些 开发中数组的使用场景非常多, 这里就简单整理总结一些常用的方法;从改变原有数据的方法、不改变原有数组的方法以及数据遍历的方法三方面总结。..., error); }); 上面代码中,getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected

    4.1K32

    技术分享 | 一步一步学测试平台开发-Vue restful请求

    一般在构建应用时需要访问后端的 API 接口获取后端数据并展示。...XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF...将用户输入的数据传递给后端接口,并拿到返回数据 res ,打印输出到浏览器的 console 中。...也可以在变量 api 中引用其它的 js 文件。api 定义好了之后,需要使用export default api 将 api 这个变量暴露出去,然后就可以在其它页面中引用它了。...network 中可以查看到返回结果,如下: image1080×318 82.6 KB 从检查页面,network 中查看 register 这个接口的返回(Response)数据, 展示如下内容

    1.3K20

    一看就会、一写就废的 Promise 实现

    fn 在 doResolve 方法内是 立即调用执行 的,并没有异步(指放入事件循环队列)处理 doResolve 内部针对 fn 函数的回调参数做了封装处理,done 变量 保证了 resolve...的 resolve 或者 reject 触发调用后,才会去 forEach 这个 _deferreds 数组中的每个 Handle 实例去处理对应的 onFulfilled, onRejected 方法...不会报错 上面源码解读中,有个 handle 内部方法,是核心中的核心,待会儿专门有一节会讲。 接下来咱们先看一下其他 API 方法的源码。...方法内部构造了一个新的 Promsie 实例并返回,这样从 api 角度解决了 Promise 链式调用的问题,而且值得注意的是,每个 then 方法返回的都是一个新的 Promise 对象,并不是当前的...all 中 promise 对象 reject 回调是公用的,利用 doResolve 内部的 done 变量,保证一次错误终止所有操作。

    62320

    2025年 JavaScript 面试题的130道题目及其答案解析,万字长文,持续更新....

    答案: localStorage 和 sessionStorage 是 Web Storage API 的一部分,用于在用户的浏览器中存储数据。...解析: localStorage:用于永久存储数据,除非手动删除,否则数据会一直保留在浏览器中。 sessionStorage:用于在一个会话中存储数据,数据在浏览器标签页关闭后会被清除。...答案: typeof 运算符用于返回一个变量或表达式的数据类型。...答案: localStorage 和 sessionStorage 是 Web Storage API 的一部分,用于在浏览器中存储数据。...解释 JavaScript 中的解构赋值(Destructuring Assignment)。 答案: 解构赋值是 ES6 引入的一个语法,用于从数组或对象中提取值并赋值给变量。

    3.3K11

    并行设计模式--Future、Callback、Promise

    设置结果 set方法中会把对应的结果赋值给属性变量Object outcome,那么FutureTask原理就就是利用了属性变量内存共享来实现的返回值获取。...因为在值算出来时自动调用后续处理因此不存在阻塞操作。...但是在业务后续操作很多时,其存在一个嵌套的问题,俗称回调地狱,这一点在JS中经常遇到: 清单7:Callback带来的回调地狱写法 api.getItem(1) .then(item => {...这一特性可以很好的在两个线程中交换数据使用,举个例子在一些RPC框架中客户端在对应的Handler中发出来RPCRequest后创建一个Promise放入到全局Map中,然后阻塞获取响应结果,在RPCResponse...异步返回的线程中从Map中取出Promise,然后主动把结果设置进去,那么对于使用方来说就像是同步完成了一次调用。

    5.1K60

    一文读懂Axios核心源码思想

    Features 从浏览器创建 XMLHttpRequest 从 Node.js 创建 HTTP 请求 支持 Promise API 拦截请求与响应 取消请求 自动装换 JSON 数据 支持客户端 XSRF...目前比较常见的方式是,服务器在收到 HTTP请求后,在响应头里添加 Set-Cookie 选项,将凭证存储在 Cookie 中,浏览器接受到响应后会存储 Cookie,根据浏览器的同源策略,下次向服务器发起请求时...,然后提供了添加,移除,遍历执行拦截器的实例方法,存储的每一个拦截器对象都包含了作为 Promise 中 resolve 和 reject 的回调以及两个配置项。...chain 队头,响应拦截器放入 chain 队尾 队列不为空时,通过 Promise.then 的链式调用,依次将请求拦截器,实际请求,响应拦截器出队 最后返回链式调用后的 Promise 这里的实际请求是对适配器的封装...(reason); }); }; 这里的 throwIfCancellationRequested 方法用于取消请求,关于取消请求稍后我们再讨论,可以看到发送请求是通过调用适配器实现的,在调用前和调用后会对请求和响应数据进行转换

    1.1K20

    前端面试之JavaScript

    栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。...object 为了弥补这一点,instanceof 从原型的角度,来判断某引用属于哪个构造函数,从而判定它的数据类型。...(作用域链的向上查找,把外围的作用域中的变量值存储在内存中而不是在函数调用完毕后销毁)设计私有的方法和变量,避免全局变量的污染。...在开发中, 其实我们随处可见闭包的身影, 大部分前端JavaScript 代码都是“事件驱动”的,即一个事件绑定的回调方法; 发送ajax请求成功|失败的回调;setTimeout的延时回调;或者一个函数内部返回另一个匿名函数...在通过new运算符被初始化的函数或构造方法中,new.target返回一个指向构造方法或函数的引用。

    99420

    JS中的Callback VS Promise

    但是,在Promise中,您将回调附加在返回的Promise对象上。...这些.then块是在内部设置的,因此它们允许回调函数返回promise,然后将其应用于.then链中的每个块. .then除了.catch块带来的被拒绝的Promise外,您从中返回的任何东西最终都会变成一个正常的...方法 JS中的Promise构造函数定义了几种静态方法,可用于从Promise中检查一个或者多个结果 Promise.all 当你想要累计一批异步操作并最终将它们的每一个值作为一个数组来接收时,满足此目标的...这仅在此处类似于Promise.allSettled 。如果这些操作中的某一项或者多项失败,则Promise将拒绝并显示错误。最终,这会出现在.catchPromise 链中。...Promise.any建议的是接受一个可迭代的Promise,并试图返回这与多数赞成接受或拒绝的Promise。

    6.1K21

    Promise如何修改对象的状态

    在JavaScript中,Promise对象的状态由其内部的resolve和reject函数来改变。...通过调用resolve函数,Promise对象的状态从pending(进行中)变为fulfilled(已完成),并传递一个值作为结果;通过调用reject函数,Promise对象的状态从pending(...它接收一个参数作为Promise对象的结果值,并在调用后将该值传递给通过then方法注册的回调函数。...在调用resolve函数时,我们传递了一个字符串作为结果值。然后,我们通过then方法注册了一个回调函数,当Promise对象状态变为fulfilled时,该回调函数会被执行并输出结果值。2....在调用reject函数时,我们传递了一个Error对象作为错误原因。然后,我们通过catch方法注册了一个回调函数,当Promise对象状态变为rejected时,该回调函数会被执行并输出错误原因。

    1.7K30

    JavaScript执行——Promise

    它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。...) } sleep(500).then( ()=> console.log("finished"));   这段代码定义了一个函数sleep,调用后,等待了指定参数(500)毫秒后执行then中的函数。...表明,在Promise新建后会立即执行,所以 首先输出AAA。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以 BBB最后输出。...原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。...然后在handle函数前加上async关键词,这样就定义了一个async函数。在该函数中,利用await来等待一个Promise。

    97720

    JS异步执行,Promise用法

    它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。...(500).then( ()=> console.log("finished"));   这段代码定义了一个函数sleep,调用后,等待了指定参数(500)毫秒后执行then中的函数。...表明,在Promise新建后会立即执行,所以首先输出 AAA。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以BBB 最后输出。...原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。...然后在handle函数前加上async关键词,这样就定义了一个async函数。在该函数中,利用await来等待一个Promise。

    6.5K30

    2022秋招前端面试题(八)(附答案)

    块级作用域解决了ES5中的两个问题:内层变量可能覆盖外层变量用来计数的循环变量泄露为全局变量(2)变量提升: var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否在会报错...:浏览器第一次加载资源,服务器返回 200,浏览器从服务器下载资源文件,并缓存资源文件与 response header,以供下次加载时对比使用;下一次加载资源时,由于强制缓存优先级较高,先比较当前时间与上一次返回...后面是一个匿名自执行函数,在 if 条件中调用了函数 g(),由于在匿名函数中,又重新定义了函数g,就覆盖了外部定义的变量g,所以,这里调用的是内部函数 g 方法,返回为 true。...两个条件都成立,所以会执行条件中的代码, f 在定义是没有使用var,所以他是一个全局变量。因此,这里会通过闭包访问到外部的变量 f, 重新赋值,现在执行 f 函数返回值已经成为 false 了。...3、then方法返回一个新的Promise实例,并接收两个参数onResolved(fulfilled状态的回调);onRejected(rejected状态的回调,该参数可选)4、catch方法返回一个新的

    77220
    领券