先放一张图片感受一下回调地狱

看起来是真的很让人头痛的东西

而现在我这里使用promise对象来解决回调地狱

采用链式的 then,可以指定一组按照次序调用的回调函数。

这时,前一个 then 里的一个回调函数,返回的可能还是一个 Promise对象(即有异步操作),

这时后一个回调函数,就会等待该 Promise对象的状态发生变化,才会被调用。

由此实现异步操作按照次序执行。

var sayhello = function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(name);
resolve();  //在异步操作执行完后执行 resolve() 函数
}, 1000);
});
}
sayhello("first").then(function () {
return sayhello("second");  //仍然返回一个 Promise 对象
}).then(function () {
return sayhello("third");
}).then(function () {
console.log('end');
}).catch(function (err) {
console.log(err);
})
//输出:first second third end

上面代码中,第一个 then 方法指定的回调函数,返回的是另一个Promise对象。

这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。

如果变为resolved,就继续执行第二个 then 里的回调函数

promise对象解决回调地狱的更多相关文章

  1. ES6(promise)_解决回调地狱初体验

    一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...

  2. 【JavaScript】 使用Async 和 Promise 完美解决回调地狱

    很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...

  3. 使用ES6的Promise完美解决回调地狱

    相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...

  4. Promise如何解决回调地狱

    为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...

  5. 回调地狱以及用promise怎么解决回调地狱

    哈哈哈,我又又又回来了,不好意思,最近枸杞喝的比较到位,精力比较旺盛. 现在我们来聊一聊啥是回调地狱,注意是回调地狱啊   不是RB人民最爱拍的那啥地狱啊,来吧,上车吧少年,这是去幼儿园的车 都让开, ...

  6. async + promise 解决回调地狱

    // 解决异步回调地狱的方案: async + promise async function writeFile() {   // 打开文件   const fd = await new Promis ...

  7. Promise解决回调地狱(多层调用问题)

    Promise # Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息:从本意上讲,它是承诺,承诺它过一段时间会给你一个结果.promise有三 ...

  8. Promise,async/await解决回调地狱

    先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...

  9. Promise解决回调地狱

    Promise是JavaScript异步操作解决方案.介绍Promise之前,先对异步操作做一个详细介绍. JavaScript的异步执行 概述 Javascript语言的执行环境是”单线程”(sin ...

随机推荐

  1. Thinking in java基础之集合框架(转载)

    集合简介(容器)把具有相同性质的一类东西,汇聚成一个整体,就可以称为集合,例如这里有20个苹果,我们把每一个苹果当成一个东西(一个对象),然后我们借用袋子把这20个苹果装起来,而这个袋子就是集合(也叫 ...

  2. js实现图片下载

    <img src='src' data-name='自定义名称'><script>//js实现图片下载 function download(){ var name = $('# ...

  3. AC日记——大爷的字符串题 洛谷 P3709

    大爷的字符串题 思路: 莫队,需开O2,不开50: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 20000 ...

  4. JavaScript best practices JS最佳实践

    JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...

  5. logrotate日志轮转

    1)基本介绍 适合应用服务日志,系统日志按天切割 如果没有日志轮转,日志文件会越来越大 将丢弃系统中最旧的日志文件,以节省空间 logrotate本身不是系统守护进程,它是通过计划任务crond每天执 ...

  6. 【javascript】基于javascript的小时钟

    计时事件:通过JavaScript,我们可以设置在一段时间间隔后执行一段代码,而不仅仅是在函数调用后立即执行. 在JavaScript中,使用计时事件是很容易的,主要有两个事件供我们使用 setTim ...

  7. [TC14860]SquadConstructor2

    [TC14860]SquadConstructor2 题目大意: 有\(n(n<2^m,m\le8)\)个互不相等的数\(v_i\).从中选取\(k(k\le8)\)个数\(b_i\),求\(\ ...

  8. Adaptive Query Optimization in Oracle Database 12c (12.1 and 12.2)

    https://oracle-base.com/articles/12c/adaptive-query-optimization-12cr1

  9. 【mybatis】mybatis中批量插入 批量更新 batch 进行insert 和 update,或者切割LIst进行批量操作

    ================================================================== 分别展示 mybatis 批量新增  和 批量更新   的操作: ...

  10. 【hibernate】错误:org.hibernate.HibernateException: identifier of an instance of com.agen.entity.Monthdetail was altered from xx to xx

    所报错误: org.hibernate.HibernateException: identifier of an instance of com.agen.entity.Monthdetail was ...