js中promise解决callback回调地狱以及使用async+await异步处理的方法

1、callback回调地狱

function ajax(fn) {
    setTimeout(()=> {
        console.log(‘你好‘)
        fn()
    }, 1000)
}
ajax(() => {
    console.log(‘执行结束‘)
    ajax(()=>{
        console.log(‘执行结束‘)
        ajax(()=>{
            console.log(‘执行结束‘)
            ajax(()=>{
                console.log(‘执行结束‘)
            })
        })
    })
})

2、promise解决回调地狱

function delay(word) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(word)
        }, 2000)
    })
}

delay(‘孙悟空‘)
    .then((word)=>{
        console.log(word)
        return delay(‘猪八戒‘)
    })
    .then((word)=>{
        console.log(word)
        return delay(‘沙悟净‘)
    })
    .then((word) => {
        console.log(word)
    })
    .catch
console.log(‘执行结束‘)

3、async+await优雅处理异步

function delay(word) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(word)
        }, 2000)
    })
}

async function start() {
    const word1 = await delay(‘孙悟空‘)
    console.log(word1)
    const word2 = await delay(‘猪八戒‘)
    console.log(word2)
    const word3 = await delay(‘沙悟净‘)
    console.log(word3)
}start()

原文地址:https://www.cnblogs.com/nayek/p/11701316.html

时间: 2024-07-29 23:32:48

js中promise解决callback回调地狱以及使用async+await异步处理的方法的相关文章

.NET 中的 async/await 异步编程

前言 最近在学习Web Api框架的时候接触到了async/await,这个特性是.NET 4.5引入的,由于之前对于异步编程不是很了解,所以花费了一些时间学习一下相关的知识,并整理成这篇博客,如果在阅读的过程中发现不对的地方,欢迎大家指正. 同步编程与异步编程 通常情况下,我们写的C#代码就是同步的,运行在同一个线程中,从程序的第一行代码到最后一句代码顺序执行.而异步编程的核心是使用多线程,通过让不同的线程执行不同的任务,实现不同代码的并行运行. 前台线程与后台线程 关于多线程,早在.NET2

Angular JS中 Promise用法

一.Promise形象讲解A promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多.promise全称是 Futures and promises. 而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的.promise解决的是异步编程的问题,对于生活在同步编程世界中的程序员来说,它可能比较难于理解,这也构成了angular入门门槛之一,以下将用

Async/Await 异步编程中的最佳做法

近日来,涌现了许多关于 Microsoft .NET Framework 4.5 中新增了对 async 和 await 支持的信息. 本文旨在作为学习异步编程的“第二步”:我假设您已阅读过有关这一方面的至少一篇介绍性文章. 本文不提供任何新内容,Stack Overflow.MSDN 论坛和 async/await FAQ 这类在线资源提供了同样的建议. 本文只重点介绍一些淹没在文档海洋中的最佳做法. 本文中的最佳做法更大程度上是“指导原则”,而不是实际规则. 其中每个指导原则都有一些例外情况

读书笔记-你不知道的JS中-promise(2)

继续填坑 模式 考虑下面的代码: function fn(x) { //do something return new Promise(function(resolve, reject) { //调用resolve(..)和reject(...) }); } var p = fn(2); new Promise(..)模式通常称为revealing constructor.传入函数会立即执行(不会像then(..)中的回调一样异步延迟),它有两个参数,分别为resolve和reject.这些是p

node.js中的匿名函数, 回调函数和嵌套函数

定义一个函数相信大家已经很熟悉了, 在javascript里的函数也是非常重要的, 使用率非常高, 有几种函数不是很好理解 一, 匿名函数 var remove = function(num1) { return num1; } var fun = remove(5); console.log(fun); 这里定义的这个函数没有设置函数名, 在使用的时候要使用变量调用这个函数. 最后的输出结果: 5 二, 回调函数, 传递的参数可以定义成任意的对象, 而在这里, 其中的一个参数就是一个函数 fu

Js中获取显示器、浏览器以及窗口等的宽度与高度的方法

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

JS中的字符串是对象,包含许多与字符串数据交互的方法(lengh,charAt(),toUpperCase(),toLowerCase())

callback vs async.js vs promise vs async / await

需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = function (code) { if (code) { return true; } else { return false; } } let readFileA = function (callback) { if (read(1)) { return callback(null, "111");

回调地狱的解决办法

回调是地狱是容易遇到的坑,解决方案是使用promise 碎碎念 相信各位玩家肯定都写过下面的这样代码: // 同时发送两个请求 let url = 'xxxxx', url1 = 'xx' $.ajax({ url, success(data) { $.ajax({ url: url1, success(data) { console.log('done') } }) } }) 是不是很贴切? 有可能有的新手小伙伴连回调都不知道,这里给大家普及一下 /* ** time - 时间 ** call