文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Promise用法详解(一)

Promise 基本概念 Promise是一个构造函数，所以可以 new 出一个Promise的实例 在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函数...Promise创建的实例，是一个异步操作，这个异步操作结果，只有两种结果 状态1：异步执行成功，需要在内部调用成功的回调函数resolve把结果返回给调用者 状态2：异步执行失败，需要在内部调用失败的回调函数...reject把结果返回调用者 由于Promise的实例是一个异步操作，所以内部拿到操作结果后，无法使用return把操作结果返回给调用者，这个时候只能使用回调函数的形式，把成功或失败的结果，返回给调用者...我们可以在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操作，指定成功(resolve)和失败(reject)回调函数 形式上和具体的Promise异步操作的区别...所以在使用Promise时我们可以用函数进行包裹，使其按需执行 通过 .then()指定回调函数的时候，成功的回调函数必须传，失败的回调可以省略 有了前面的这些铺垫我们来体验一下Primise的魅力

32720
您找到你想要的搜索结果了吗？
是的
没有找到

初学者应该看的JavaScript Promise 完整指南

与回调相比，Promise 具有许多优点，例如： 让异步代码更易于阅读。 提供组合错误处理。 *　更好的流程控制，可以让异步并行或串行执行。 回调更容易形成深度嵌套的结构（也称为回调地狱）。...1.1 如何将现有的回调 API 转换为 Promise？ 我们可以使用 Promise 构造函数将回调转换为 Promise。...Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...Promise 仅仅只是回调？ 并不是。承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。 Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。...✅ Fulfilled：操作成功，它调用.then回调，例如.then(onSuccess)。 ⛔️ Rejected: 操作失败，它调用.catch或.then的第二个参数（如果有）。

3.2K30

一个小白的角度看JavaScript Promise 完整指南

与回调相比，Promise 具有许多优点，例如： 让异步代码更易于阅读。 提供组合错误处理。*　更好的流程控制，可以让异步并行或串行执行。 回调更容易形成深度嵌套的结构（也称为回调地狱）。...1.1 如何将现有的回调 API 转换为 Promise？ 我们可以使用 Promise 构造函数将回调转换为 Promise。...Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。来看看它的实际效果。...✅ Fulfilled：操作成功，它调用.then回调，例如.then(onSuccess)。 ⛔️ Rejected: 操作失败，它调用.catch或.then的第二个参数（如果有）。

3.5K31

js有哪些异步操作_js单线程怎么实现异步

事件模型 JavaScript最基础的异步编程形式（比如点击事件、键盘事件） 直到事件触发时才执行处理程序 回调模式 回调模式与事件模型类似，异步代码都会在未来的某个时间点执行，而这的区别是回调模式中被调用的函数是作为参数传入的...调用readFile函数后，console.log(‘Hi!’)语句会立即执行，当readFile结束执行的时候，会向任务队列的末尾添加一个新任务，该任务包含回调函数及相应的参数。...虽然这个模式运行效果很不错，但是如果嵌套了太多的回调函数，就会陷入回调地狱。 当需要跟踪多个回调函数的时候，回调函数的局限性就体现出来了，Promise非常好的改进了这些情况。...Promise Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。...当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法， 所以在异步操作的完成和绑定处理方法之间不存在竞争

3.1K20

记得有一次面试被虐的题，Promise 完整指南

与回调相比，Promise 具有许多优点，例如： 让异步代码更易于阅读。 提供组合错误处理。 *　更好的流程控制，可以让异步并行或串行执行。 回调更容易形成深度嵌套的结构（也称为回调地狱）。...1.1 如何将现有的回调 API 转换为 Promise？ 我们可以使用 Promise 构造函数将回调转换为 Promise。...Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...Promise 仅仅只是回调？ 并不是。承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。 Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。...✅ Fulfilled：操作成功，它调用.then回调，例如.then(onSuccess)。 ⛔️ Rejected: 操作失败，它调用.catch或.then的第二个参数（如果有）。

2.3K20

深度学习的JavaScript基础：从callbacks到syncawait

在上面的代码中getJSON调用会立即返回，不会阻塞主线程运行，数据获取成功之后，会调用updateUI，如果失败，则调用showError。...第一个不足之处，就是所谓的“回调地狱”。...callbacks的另一个问题是“控制反转”，当你的代码调用另一个函数，如果这个函数并不是你编写的，你就失去了控制权。万一你调用的回调函数执行了非常耗时的操作，但又没有考虑异步，你也无法控制。...创建新的Promise时，实际上只是在创建一个普通的JavaScript对象。该对象可以调用then和catch这两个方法，这两个方法都接受一个回调函数作为参数。...如果请求成功，则将调用resolve；如果发生错误，则将调用reject。

88510

中级前端面试题（附答案）

)、rejected(已失败)2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外...3、then方法返回一个新的Promise实例，并接收两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可选)4、catch方法返回一个新的...③Promise 与回调对比解决了回调地狱的问题，将异步操作以同步操作的流程表达出来。...3）Promise缺点1、无法取消Promise，一旦新建它就会立即执行，无法中途取消。2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。...4、Promise 真正执行回调的时候，定义 Promise 那部分实际上已经走完了，所以 Promise 的报错堆栈上下文不太友好。

1K10

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

但大多数API为异步调用，需要传递成功或失败回调函数，例如wx.request发起https请求需要在成功或失败回调中书写业务逻辑，这时就很容易会遇到回调地狱问题。...如果业务场景需要更深层的嵌套异步操作，只需要在 then函数的成功回调内继续 返回接下来的异步操作的 promise对象，支持链式调用。这种书写方式更容易维护。...Promise.resolve(value) 接着说，如果链式调用里then函数成功回调内，我们需要逻辑判断是否返回异步操作的 promise对象，或同步返回具体结果。但同时又希望链式调用能够维持。...promise的链式调用中的遇到在 then函数成功回调内进行逻辑判断，需要根据接口返回的数据进行异常处理。...可以看出，async/awit 语法相对于 promise().then()更加简洁清晰。上面三个异步请求代码书写方式变成顺序书写，不存在回调函数嵌套问题。

1.4K30

JavaScript中的Promise

当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法， 所以在异步操作的完成和绑定处理方法之间不存在竞争...这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态...当这个回调函数被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的完成结果作为新promise的完成结果。...回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected) 7.catch()方法 Promise.prototype.catch...如果Promise 对象状态变为resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。

1.1K20

ES6之Promise对象

Promise对象其实就是解决异步用的，比回调函数和事件更合理更强大，由ES6写进语言标准，统一了用法，然后提供了原生Promise对象。 两个特点： 对象的状态不受外界影响。...Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。...这边说个东西，我们都知道成功是resolve状态，为什么这边是fulfilled，我查了蛮多的，没有一个有说明，我们可以把这两个理解为一个，甚至直接把fulfilled当做不存在，resolve就是成功...Then方法，给实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。...Catch方法，其实也可以直接用then方法写，为了语义化，专门制定错误的回调函数。如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数。

29220

【笔记】HybridApp中使用Promise化的JS-Bridge

Native回调函数；2、调用InvokeNative函数，发送请求数据） 改造前：  使用回调，在每次调用Ygritte中的方法前，必须先定义好回调函数，挂载在window[funcName]上。...问题： 1、可能导致回调地狱：比如某个场景中，需要先判断App版本，然后调用不同的Native接口，那么就需要在回调中再次定义回调，产生嵌套； 2、无法改为同步：比如上图的场景中，在进入Home页面，在...使用回调的方式，理论上存在mounted执行时，  [created] 中的回调还没有执行。...改造： 使用Promise对调用和回调进行改造 为保证旧代码兼容，不修改原来在Ygritte中使用原型中添加接口的形式 回调函数的定义封装，在回调中执行resolve /** * 获得用户签名数据...只执行一个resolve的问题 * Promise的定义中一旦resolve或者reject，就不会执行后面的resolve和reject * * getPhoto: 成功获取图片数据时，会回调两次

1.2K40

回调、使用Promise封装ajax()、Promise入门

回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a function call a function back callback 看这里:Callback（回调）是什么...---方应杭知乎 callback 是一种特殊的函数，这个函数被作为参数传给另一个函数去调用。这样的函数就是回调函数。...1.1 回调例子 Callback 很常见 $button.on('click', function(){}) click后面的 function 就是一个回调，因为「我」没有调用过这个函数，是 jQuery...只有在请求成功并接收到响应的时候才会执行这个success函数,这就是回调.传一个函数作为参数但是不执行,让另一个函数去调用,就是回调函数 1.2Callback 有点反直觉 callback 有一点「...代码都在这里 3.1 $.Ajax()中的promise 如果不使用promise,$.ajax请求的时候成功和失败的回调函数是写在参数里的,他是对象参数的一个值 $.ajax({ method

3.3K51

【ES6】promise 模式

(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立刻调用， 所以在异步操作的完成情况和它的绑定方法之间不存在竞争条件。)...图示： 语法： New Promise(function(resolve,reject){...}); 参数解释： Resolve:处理执行成功； Reject:处理执行失败； 一旦我们的操作完成即可调用这些函数...Promise.race(iterable)：当 iterable 参数里的任意一个子 promise 被成功或失败后，父 promise 马上也会用子promise的成功返回值或失败详情作为参数调用父...（1）如果这个回调被调用，新 promise 将以它的返回值来resolve； （2）如果当前promise进入fulfilled状态，则以当前promise的肯定结果作为新promise的肯定结果。...2、Promise.prototype.then(onFulfilled, onRejected) 添加肯定和否定回调到当前 promise, 返回一个新的 promise, 将以回调的返回值 来resolve

16220

promise知识盲区整理

只有最开始的promise对象成功执行以后，才有下面的成功回调函数的链式调用执行，否则不会执行成功回调函数的链式调用 ---- 中断promise链？...self.PromiseResult=data; //调用异步的回调函数 //首先判断是否是异步回调 //遍历调用回调数组里面每个成功的回调函数 //执行回调函数是异步的...的状态值和结果 // //这里直接调用成功回调函数返回的promise对象的回调函数 // //如果返回的promise对象状态为成功， // //那么其在回调函数就会执行成功的回调函数...//2.设置对象的返回值 self.PromiseResult=data; //调用异步的回调函数 //首先判断是否是异步回调 //遍历调用回调数组里面每个成功的回调函数...对象 // //判断成功回调函数返回的promise的状态值和结果 // //这里直接调用成功回调函数返回的promise对象的回调函数 // //如果返回的

61410

ES6中的Promise深入学习

实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数：第一个回调函数(onResolved)是Promise对象状态变为Resolved(成功)时调用，第二个回调函数...3.1-指定回调函数的方式更加的灵活 例：使用纯回调方式去创建一个音频文件 缺点：必须要在启动异步任务之前就要给它指定回调函数 //成功的回调函数 function successCallback(value...){ console.log("音频文件创建成功"+value) } //失败的回调函数 function failureCallback(error){ console.log("音频文件创建失败...回调函数的嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件 如：现在有一个读文件的需求，要一次读取a.txt、b.txt、c.txt文件，而fs.readFile又是异步读取(假设现在没有出现...指定多个成功/失败回调函数，都会调用吗？

1.2K30

这次聊聊Promise对象

异步模式：每一个任务有一个或多个回调函数，前一个任务A结束后，不是执行后一个任务B，而是执行任务A的回调函数。而后一个任务B是不等任务A结束就执行。任务的执行顺序，与任务的排序顺序不一致。...异步模式编程有四种方法：回调函数（最基本的方法，把B写成A的回调函数）、事件监听（为A绑定事件，当A发生某个事件，就执行B）、发布/订阅，以及本文要介绍的Promise对象。...它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。...fulfilled状态和rejected状态的回调函数，即它的参数是两个函数，第一个用于处理操作成功后的业务，第二个用于处理操作失败后的业务。...这时，由于两个实例都进入了fulfilled状态，所以Promise.all()才进入了then方法。 使用场景：执行某个操作需要依赖多个接口请求回的数据，且这些接口之间不存在互相依赖的关系。

2.4K560

任务，微任务，队列和时间表

微任务包括变异观察者回调，并如上例所示，承诺回调。 一旦承诺达成，或者如果已经达成，它将对微任务排队以进行其反动回调。这样可以确保即使promise已经解决，promise回调也是异步的。...变异观察者和promise回调作为微任务排队。该setTimeout回调排队的任务。...此规则来自HTML规范，用于调用回调： 如果脚本设置对象堆栈现在为空，请执行微任务检查点 — HTML：在回调步骤3 之后进行清理 …并且微任务检查点涉及遍历微任务队列，除非我们已经在处理微任务队列。...在调用每个侦听器回调之后…… 如果脚本设置对象堆栈现在为空，请执行微任务检查点 — HTML：在回调步骤3 之后进行清理 以前，这意味着微任务在侦听器回调之间运行，但.click()会导致事件同步分派，...因此调用的脚本.click()仍在回调之间的堆栈中。

2.2K20

Promise解决回调嵌套问题及终极解决方案async 和 await

一、Promise 1.异步函数 与 回调函数的说明 回调函数: 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数 什么时候会用到回调函数, 异步的时候 延时器 setTimeout...: 回调函数的阅读性不好, 回调不会立马执行 回调函数如果大量的嵌套, 可维护性差 (回调地狱) promise 就是为了解决回调函数嵌套的问题而存在的 2.promise 的基本语法 目的: promise...promise内部会封装一个异步操作 成功调用 resolve 失败调用 reject }) 2.如何使用一个promise 对象 .then(res => { ... }) 处理成功...{ resolve(data) // resolve: 成功的时候, 需要调用 } }) }) 使用读写文件的promise对象 p.then(res=>{ //res即是...b, c 三个文件 回调地狱: 回调函数嵌套回调函数, 嵌套多了, 将来就很难维护, 很难理清顺序 promise 解决回调地狱的问题优化 : 将读取文件创建promise的过程封装起来，将来一调用函数

1.9K20

面试题-为什么要使用Promise，Promise的优点

) 假设现在有一个名为 createAudioFileAsync() 的函数，如果给出一些配置和两个回调函数，这个函数能异步地生成音频文件。...一个回调函数是文件成功创建时的回调，另一个则是出现异常时的回调。...不使用Promise，回调函数必须先指定 // 成功的回调函数 function successCallback (result) { console.log('声音文件创建成功: ' + result..., failureCallback) }, 3000) 2.支持链式调用（将异步操作以同步操作的流程表达出来）, 可以解决回调地狱问题 什么是回调地狱?...回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件 回调地狱的缺点? 不便于阅读 / 不便于异常处理 解决方案? promise链式调用 终极解决方案?

55820
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券