首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

深入了解Promise对象,写出优雅代码,告别地狱

实际应用 结束语 引言 我们都知道,一个好代码是有很强维护性、阅读性, 但是在Jacascript中函数量一增多, 很容易影响代码阅读性,导致代码难以维护, 这种现象就叫做回地狱, 为了解决这现象..., ES6Promise写进了语言标准里, 专门用来解决这个地狱现象, 那么就让我们来了解一下吧。...时,函数数量很多时候代码,以及使用Promise以后代码吧。..., 这区别已经很明显了吧, 显而易见,使用完Promise后, 这种函数里面嵌套函数代码就变得很简洁,耐看,那我们就开始学习Promise使用吧 二、Promise三种状态 pending...结束') }) // 输出结果: // I am Lpyexplore in CSDN // Promise结束 结束语 相信大家对Promise都有了一定了解了吧, 以后可以多重回代码用Promise

54010

Ajax处理success函数返回json数据。

查询结果因为是多条数据,一直以来动用ajax查都是单数据,还第一次使用多数据,惭愧。...TP5中查询结果已经是一个数组对象,如果直接return回去,那么success函数获取是一个对象,对象操作结果还是要再一次转换成数组,讲起来都觉得麻烦,别说操作了。...最好是直接返回字符串或者json。...开始做时候想着,直接用PHP把数组处理好,返回前端就好直接用了,所以对查询结果进行json编码,这个很简单,利用PHP内置json操作函数json_encode对array进行编码操作,然后return...原本想着直接使用返回json数据去遍历填充页面了,万万没想到,折腾好大一会儿没成功。使用alert弹了下返回data,完整显示是一个json呐,为毛就遍历不到呢。

3.4K20

小程序不同页面的异步,callback和promise使用讲解

下面就来教大家两种方式来很好解决这个问题。 一,通过callback。 先看下代码,然后我再具体大家讲解下原理。 app.js里定义如下方法 ?...我们上图callback参数,其实就是下图 function(result){} ? 把function方法作为一个参数传递进去目的,就是为了下面的。 ?...,当失败时候调用reject状态改为已失败,一旦状态发生改变之后,状态就凝固了,后面就无法改变状态了,成功会将成功数据返回,失败会将失败信息返回。...好了,到这里我们两种不同页面的异步大家讲完了。...方法 let promise = app.promiseGetData() promise.then((res) => { //获取成功结果,res中存着获取成功时数据

1.4K32

传统函数与 ES6中promise以及 ES7 asyncawait终极异步同步化

目录 传统函数封装 ES6中promise 异步同步化(终极) ---- 传统函数封装 js中函数理解:函数就是传递一个参数化函数,就是这个函数作为一个参数传到另外一个主函数里面...ES6中promise Promise特点 仅只有3种状态:进行中,已成功,已失败,且只有异步结果可以影响状态,其它都不能影响。...promise.then(successCb, faildCd) 接收两个函数作为参数,来处理上一个promise 对象结果。then f 方法返回promise 对象。...第一种链式写法,使用catch,相当于前面一个then方法返回promise 注册,可以捕获到前面then没有被处理异常。第二种是函数写法,仅为为上一个promise 注册异常回。...返回值是 Promise:返回值是 Promise 对象,这比 Generator 函数返回值是 Iterator 对象方便多了。你可以用then方法指定下一步操作。

1.1K20

【JS】302- 地狱解决方案之Promise

,成功结果调回来向下执行 }) 上述代码只是一层级,如果代码复杂后,会出现多层级,代码可读性也会很差,那有没有一种方式,不用考虑里面的内容,直接根据结果成功还是失败执行下面的代码呢?...Promise含义 书上这么说: Promise 是异步编程一种解决方案,比传统解决方案–函数和事件--更合理和更强大。...==Promise其实没有做任何实质代码操作,它只是对异步操作函数不同结果定义了不同状态。...function(value) { conlose.log(value); //未定义 }); 代码分析: 上面的第二个then方法中值虽然是未定义,但是每一个then一定会==返回一个新...这种情况,代码虽然看起来会比callback简介和规范了很多,但是还是感觉一些复杂,有没有更好解决办法呢?请看下一篇博客 终极使用--async和await讲解

1.3K30

地狱解决方案之Promise

,成功结果调回来向下执行 }) 上述代码只是一层级,如果代码复杂后,会出现多层级,代码可读性也会很差,那有没有一种方式,不用考虑里面的内容,直接根据结果成功还是失败执行下面的代码呢?...Promise含义 书上这么说: Promise 是异步编程一种解决方案,比传统解决方案–函数和事件--更合理和更强大。...==Promise其实没有做任何实质代码操作,它只是对异步操作函数不同结果定义了不同状态。...function(value) { conlose.log(value); //未定义 }); 代码分析: 上面的第二个then方法中值虽然是未定义,但是每一个then一定会==返回一个新...这种情况,代码虽然看起来会比callback简介和规范了很多,但是还是感觉一些复杂,有没有更好解决办法呢?请看下一篇博客 终极使用--async和await讲解

74320

【JS】2030- 通过可视化彻底搞懂 Promise执行逻辑

Promise Reaction 包含一个 [[Handler]] 属性,其中包含我们传递给它。...当这些任务在未来某个未知时间点完成时,我们可以使用此类异步操作通常提供功能,要么使用异步任务返回数据进行 resolve,要么在发生错误时进行 reject。...现在被添加到调用栈,并记录 result 值,即 [[PromiseResult]] 值;字符串 "Done!"。 一旦执行完毕并从调用栈中弹出,程序就完成了!...由于我们没有显式地返回一个值,所以最后一个 then promise [[PromiseResult]] 是未定义,这意味着它隐式地返回未定义值。 当然,使用数字并不是最现实场景。...由于处理程序被推送到微任务队列,因此可以以非阻塞方式处理最终结果。这样就能更轻松地处理错误、多个操作连锁在一起,并使代码更具可读性和可维护性!

15810

地狱解决方案之Promise

,成功结果调回来向下执行 }) 上述代码只是一层级,如果代码复杂后,会出现多层级,代码可读性也会很差,那有没有一种方式,不用考虑里面的内容,直接根据结果成功还是失败执行下面的代码呢?...Promise含义 书上这么说: Promise 是异步编程一种解决方案,比传统解决方案–函数和事件--更合理和更强大。...我理解: Promise使函数可以规范链式调用 Promise原理与讲解 原理 Promise三种状态 pending:进行中 fulfilled :执行成功 rejected :执行失败...==Promise其实没有做任何实质代码操作,它只是对异步操作函数不同结果定义了不同状态。...function(value) { conlose.log(value); //未定义 }); 代码分析: 上面的第二个then方法中值虽然是未定义,但是每一个then一定会==返回一个新

1.3K30

promise知识盲区整理

promise.then()返回promise结果状态由函数返回值决定 then没有返回值 在then函数中抛出异常 返回值是字符串,null等 返回值是一个promise对象 串联多个任务...} else { //失败状态函数 reject(i);//promise对象状态设置为失败 } }); //调用then方法 //这里对应成功和失败函数,可以接收参数.../此时上面的then没有返回值,返回结果未定义,状态是未决; .then(value=>{ console.log(value); }); ---- 异常穿透 const p=new Promise...状态值和结果 // //这里直接调用成功函数返回promise对象函数 // //如果返回promise对象状态为成功, // //那么其在函数就会执行成功函数...对象 // //判断成功函数返回promise状态值和结果 // //这里直接调用成功函数返回promise对象函数 // //如果返回

61710

链式操作用法reject用法catch用法all用法race用法

其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是Promise状态置为fullfiled,reject是Promise状态置为rejected。...这就是Promise作用了,简单来讲,就是能把原来写法分离出来,在异步操作执行完后,用链式调用方式执行函数。 你可能会不屑一顾,那么牛逼轰轰Promise就这点能耐?...那么问题来了,有多层该怎么办?如果callback也是一个异步操作,而且执行完后也需要有相应函数,该怎么办呢?总不能再定义一个callback2,然后callback传进去吧。...而Promise优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行操作。...未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); }); 在resolve

4.3K20

ES6—new Promise()讲解,Promise对象是用来干嘛?应该怎么用?使用场景有哪些?

其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是Promise状态置为fullfiled,reject是Promise状态置为rejected。...那么问题来了,有多层该怎么办?如果callback也是一个异步操作,而且执行完后也需要有相应函数,该怎么办呢?总不能再定义一个callback2,然后callback传进去吧。...而Promise优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行操作。...未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); }); 在resolve中...所以上面代码输出结果就是: 有了all,你就可以并行执行多个异步操作,并且在一个中处理所有的返回数据,是不是很酷?

1.4K20

Promise用法及使用案例

resolve函数作用,Promise对象状态从“未完成”变成“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作结果,作为参数传递出去; reject函数作用是...这就是Promise作用了,简单来讲,就是能把原来写法分离出来,在异步操作执行完后,用链式调用方式执行函数。...如果callback也是一个异步操作,而且执行完后也需要有相应函数,该怎么办呢?总不能再定义一个callback2,然后callback传进去吧。...而Promise优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行操作。...未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); }); 在resolve

47030

一杯喜茶时间手搓Promise

then()接收2个参数,第一个对应resolve,第二个对应reject。...catch()跟then()第二个参数一样,用来接受reject,但是还有一个作用,如果在then()中执行resolve时抛出异常,这个异常可能是代码定义抛出,也可能是代码错误,而这个异常会在...上面例子中,RunPromise()调用resolve,then()第一个参数对应,状态从pending改成fulfilled,且状态不会再改变。...时,都知道then()有2个参数,分别是状态为fulfilled和rejected时函数,我们在这里2个函数定义为onFulfilled和onRejected。...是否拥有then(),并且如果then()是一个函数,那么就可执行xthen(),并且带有成功与失败 flag作用是执行xthen()时成功与失败只能调用一次 执行xthen(),成功时继续递归解析

75740

二十三期:一道面试题和三个个知识点

消息队列:一个JavaScript运行时包含了一个带处理消息消息队列。每个消息都关联一个用于处理这个消息函数。 在事件循环期间某个时刻,运行时会从最先进入队列消息开始处理队列中消息。...个人理解消息就是事件函数。 在浏览器里,每当一个事件发生并且有一个事件监听器绑定在该事件上时,一个消息就会被添加进消息队列。如果没有事件监听器,这个事件将会丢失。...以往我们写promise时候,需要在then返回值中才能捕获我们想要结果。 但是await可以直接捕获我们想要结果。...简单来说:await 关键字使JavaScript运行时暂停于此行,允许其他代码在此期间执行,直到异步函数调用返回结果。一旦完成,我们代码继续从下一行开始执行。...此时 getOtherList() 返回 promise 将会完成(fullfilled),返回 response 会被赋值 response 变量。

54220

then, catch, finally如何影响返回Promise实例状态

如果.catch(onRejected)onRejected返回了一个状态为rejectedPromise实例,那么.catch返回Promise实例状态也变成rejected。...onRejected中抛出了异常,那么.catch返回Promise实例状态也变成rejected。...如果函数返回值是一个状态为rejectedPromise实例,那么.then, .catch或.finally返回Promise实例状态就是rejected。...如果函数返回值是一个还未决议Promise实例p2,那么.then, .catch或.finally返回Promise实例p1状态取决于p2决议结果。...如果函数中抛出了异常,那么.then, .catch或.finally返回Promise实例状态就是rejected,并且reason是所抛出异常对象e。

1.1K10
领券