首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ES6 中 Promise 详解

从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。 Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。...Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。...它的另一个作用是,当执行 resolve 的回调(也就是上面 then 中的第一个参数)时,如果抛出异常了(代码出错了),那么也不会报错卡死 js,而是会进到这个 catch 方法中。...比如下面代码,两个个异步操作是并行执行的,等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。...我们将它们一起放在 race 中赛跑。 28 //如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。

60020

ES6中的Promise对象作用

除了善用设计模式提高代码优雅程度外,es6原生提供的Promise对象也为异步函数回调提供的比较优雅的解决方案。它把原来的嵌套回调变成了级联调用,很好的解决回调地狱的问题。...以下关于Promise对象的解释内容引用自《ES6标准入门》,感谢大神阮一峰的布道。 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。...上面代码中,Promise 在resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。...产生的错误 7}); 上面代码中,一共有三个 Promise 对象:一个由getJSON产生,两个由then产生。...(err) { 15 // error 16 }); 至于这么写的理由,其实就是第二种写法可以捕获前面then方法中的错误,而如果没有使用catch方法,Promise对象抛出的错误不会传递到外层代码中

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

    ES6中的Promise和Fetch

    ES6中的Promise和Fetch 2018-1-24 作者: 张子阳 分类: Web前端 JavaScript是单线程执行的,因此,为了避免操作时的页面中断(体现为页面假死),可以使用回调函数...但是如果回调函数中仍然嵌套有回调函数,代码就会变得越来越不可维护。这篇文章介绍ES6如何通过Promise解决这个问题,并介绍了相关的Fetch方法。...使用Promise ES6引入了Promise来解决这个问题,简单来说,Promise将一层套一层的的回调,改成链式操作。...在ES6中,提供了fetch方法简化了这一操作。除此以外,fetch方法返回的是一个Promise对象,因此,可以链式发起异步请求。而服务端的返回值则通过response对象传递。...总结 这篇文章主要讲述了ES6中的Promise对象和Fetch方法,上面的代码,无需Babel就可以在新版本Chrome浏览器下直接运行,建议想要熟悉的朋友们敲一遍代码,执行一遍以加深理解。

    1.5K40

    深入解析ES6中的promise

    Promise.all方法可以把多个promise的实例包装成一个新的promise实例 Promise.all( [promise1, promise2] ) : Promise 数组中,如果promise...JavaScript/ES6 Promise JavaScript的Promise代表一个操作的结果还没有结果,就是如网络请求操作,当我们从某个数据源获取数据的时候,没有办法确定它什么时候能够返回,...任务一,任务二,任务三,.then() -> success 任务成功 ES6 Promise对象用于表示一个异步操作的最终状态,以及其返回的值。...Promise.all(iterable) 这个方法返回一个新的promise对象,该promise对象在itearable参数中,当里面所有的的promise对象决议成功的时候才触发成功,否则里面如何一个...热Promise 在JavaScript中,所有代码都是单线程的,也就是同步执行的,promise就是为了提供一个解决方案的异步编程。

    1.6K40

    ES6的Promise

    时,会执行相应的方法,并且状态一旦改变,就无法再次改变状态,这也是它名字promise-承诺的由来 ES6之前的Promise 在ES6中,Promise终于成为了原生对象,可以直接使用。...Promise(目前为止并不是所有浏览器都能很好的兼容ES6),而是使用已经较为成熟的有大量小伙伴使用的第三方Promise库,下面就为小伙伴推荐一个—— Bluebird Promise的基本用法 声明一个...实例的异步方法和then()中返回promise有什么区别?...,p2的状态一旦改变,p1将会立即执行自己对应的回调,即then()中的方法针对的依然是p1 then()中返回promise 由于then()本身就会返回一个新的promise,所以后一个then()...针对的永远是一个新的promise,但是像上面代码中我们自己手动返回p4,那么我们就可以在返回的promise中再次通过 resolve() 和 reject() 来改变状态 Promise的其他api

    75030

    ES6中的Promise深入学习

    这个时候我们就可以用到了Promise中then方法的链式调用。 then方法返回的是一个新的Promise实例(注意:不是原来的那个Promise实例)。...的API说明(catch、all、race、resolve、reject、finally) 更多详细API可以参考阮一峰的ES6入门教程-Promise:https://es6.ruanyifeng.com...例:const p = Promise.race([p1, p2, p3]); 上面的代码中,只要p1、p2、p3中有一个实例率先改变状态,p的状态就会跟着改变。...该方法是 ES2018 引入标准的。 例:下面的代码中,不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数。...方法:在回调函数中返回一个pendding状态的promise对象(return new Promise(()=>{}))

    1.2K30

    前端-ES6中promise的实现原理

    第四、ES6的promise执行过程中,你是无法获得执行的进度的,到底它现在是pending还是resolve,还是reject。就好像妞和她的闺蜜探讨要不要接受你,你是打听不到的。...在es6中,你只要大喊一句,妞,给我个承诺,它就会给你一个promise,就像下面这样: var promise = new Promise(function(resolve,reject){    ...在ES6中Promise是一个构造函数,这简单,给这个dosomething换个名字, function Promise(){    this.then = function(callback){...,还有什么事情要做,在then方法的回调函数中我们希望得到promise的值,这个值是在fn函数调用后被resolve函数运算后得到的,最终要在onResolved函数中拿到,也就是说,我们必须在resolve...resolve函数中加的if判断只为了对付返回值是promise的情况下仍然可以通过后续的then方法取到值,handle中的try/catch块的加入使得可以捕获到promise及then方法回调中的错误

    64320

    ES6中的Promise和Generator详解

    简介 ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性。...Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。...但是Promise.then中的方法,则会等到一个调用周期过后再次调用,我们看下面的例子: let promise = new Promise(((resolve, reject) => { console.log...相应地,连续的执行就叫做同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。 ES6诞生以前,异步编程的方法,大概有下面四种。...总结 Promise和Generator是ES6中引入的非常中要的语法,后面的koa框架就是Generator的一种具体的实现。我们会在后面的文章中详细讲解koa的使用,敬请期待。

    1.2K21

    关于 ES6 中 Promise 的面试题

    所以 代码中的reject('error'); 不会有作用。 Promise 只能 resolve 一次,剩下的调用都会被忽略。...答案 // 保存数组中的函数执行后的结果 var data = []; // Promise.resolve方法调用时不带参数,直接返回一个resolved状态的 Promise..., // 第二次的 then 方法接受数组中的函数执行后返回的结果, // 并把结果添加到 data 中,然后把 data 返回。...,也就是 sequence, 他的 [[PromiseValue]] 值就是 data, // 而 data(保存数组中的函数执行后的结果) 也会作为参数,传入下次调用的 then 方法中。...,然后从数组(promises)中删掉这个 Promise 对象,再加入一个新的 Promise,直到全部的 url 被取完,最后再使用 Promise.all 来处理一遍数组(promises)中没有改变状态的

    93920

    ES6 Promise

    一、什么是 Promise Promise 对象用于表示一个异步操作的最终状态(完成或失败)以及返回的值。...二、Promise 的状态 pending(进行中) fulfilled(已成功) rejected(已失败) Promise 的状态只有两种可能,从 pending 变为 fulfilled...传来的数据或捕捉到then()中的运行报错时,做些什么) }); 五、Promise.finally() finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作 promise.finally...的状态就变成 rejected,此时第一个被 reject 的实例的返回值,会传递给 Promise 的回调函数 function getData1() { return new Promise...() race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例 与 all 方法的区别是:Promise.race([p1, p2, p3]) 里面哪个结果获得的快,就返回哪个结果

    48510

    关于 ES6 中 Promise 的面试题

    所以 代码中的reject('error'); 不会有作用。 Promise 只能 resolve 一次,剩下的调用都会被忽略。...答案 // 保存数组中的函数执行后的结果 var data = []; // Promise.resolve方法调用时不带参数,直接返回一个resolved状态的 Promise 对象。..., // 第二次的 then 方法接受数组中的函数执行后返回的结果, // 并把结果添加到 data 中,然后把 data 返回。...]] 值就是 data, // 而 data(保存数组中的函数执行后的结果) 也会作为参数,传入下次调用的 then 方法中。...,然后从数组(promises)中删掉这个 Promise 对象,再加入一个新的 Promise,直到全部的 url 被取完,最后再使用 Promise.all 来处理一遍数组(promises)中没有改变状态的

    1.3K10

    【ES6】promise 模式

    概述 一个Promise对象代表着一个还未完成,但预期将来会完成的操作; Promise 对象是一个返回值的代理; 它允许你为异步操作的成功或失败指定处理方法; 异步方法会返回一个包含了原返回值的...Promise.race(iterable):当 iterable 参数里的任意一个子 promise 被成功或失败后,父 promise 马上也会用子promise的成功返回值或失败详情作为参数调用父...promise 绑定的相应句柄,并返回该 promise 对象。...(1)如果这个回调被调用,新 promise 将以它的返回值来resolve; (2)如果当前promise进入fulfilled状态,则以当前promise的肯定结果作为新promise的肯定结果。.../a/1190000000684654 浅谈Javascript中Promise对象的实现

    19520

    ES6(二):Promise

    ES6之前解决异步编程只能使用回调函数或事件,ES6中加入了 Promise,使得异步编程更加简洁直观和合理 特点 Promise是一个对象,具有以下两个特点: 对象的状态不受外界影响 状态一旦改变就不会再变...使用方法 基本使用 ES6中规定,Promise对象是一个构造函数,于是我们就需要使用new关键字实例化: code: const promise = new Promise((resolve, reject...resolve(pro1); }); 上述代码中,pro1和pro2都是Promise实例,但是pro2的resolve将pro1作为参数,此时pro1的状态就会传递给pro2,也就是说,pro1...1000); }); pro2.then(res => { console.log(res); }).catch(err => { console.log(err); }); 在这段代码中,...pro2的状态则是在1秒之后改变。由于pro2返回的是另一个Promise(pro1),导致pro2自己的状态无效了,由pro1的状态决定pro2的状态。

    45830

    ES6之Promise

    Promise JS是单线程的 就是同一个时间只能处理一个任务。就类似生活中的去超市排队结账,正常情况下,一位收银员只能为一位顾客结账,其他顾客需要在后面排队等候。...obj = JSON.parse(xmlhttp.responseText) console.log(obj) } } 复制代码 Callback Hell JavaScipt 中的许多操作都是异步的...回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象promise可以支持多个并发的请求,获取并发请求中的数据这个promise可以解决异步的问题,本身不能说promise是异步的...参数传递promise数组中所有的 Promise 对象都变为resolve的时候,该方法才会返回, 新创建的 Promise 则会使用这些 promise 的值。 6....Promise.race() > 参数 promise 数组中的任何一个 Promise 对象如果变为 resolve 或者 reject 的话, 该函数就会返回,并使用这个 Promise

    73720

    ES6 Promise用法小结

    (ps:什么是原型:javascript中的原型与原型链_傻小胖的博客-CSDN博客_javascript原型和原型链) Promise对象有以下两个特点。 (1)对象的状态不受外界影响。...所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如: 开始异步请求 const promiseClick...,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。...(也就是说then方法中接受两个回调,一个成功的回调函数,一个失败的回调函数,并且能在回调函数中拿到成功的数据和失败的原因),所以我们能够分别拿到成功和失败传过来的数据就有以上的运行结果 catch的用法...与Promise对象方法then方法并行的一个方法就是catch,与try catch类似,catch就是用来捕获异常的,也就是和then方法中接受的第二参数rejected的回调是一样的,如下:

    32520

    ES6之Promise对象

    Promise对象其实就是解决异步用的,比回调函数和事件更合理更强大,由ES6写进语言标准,统一了用法,然后提供了原生Promise对象。 两个特点: 对象的状态不受外界影响。...Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。...then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。...不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法,catch可以捕获前面then方法执行中的错误,如果没有使用catch方法指定错误处理的回调函数...这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。 All方法,用于将多个Promise实例变成一个Promise对象。

    31120
    领券