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

ES6 Promise 详解

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

60020

ES6Promise对象作用

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

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

    ES6Promise和Fetch

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

    1.5K40

    深入解析ES6promise

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

    1.6K40

    ES6Promise深入学习

    这个时候我们就可以用到了Promisethen方法链式调用。 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

    ES6Promise

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

    74830

    ES6Promise和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

    前端-ES6promise实现原理

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

    63620

    关于 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)没有改变状态

    93820

    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]) 里面哪个结果获得快,就返回哪个结果

    47810

    关于 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

    ES6promise 模式

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

    19320

    ES6(二):Promise

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

    45530

    ES6Promise

    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

    73420

    ES6Promise对象

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

    30920

    ES6 Promise用法小结

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

    32320
    领券