javaScript杂谈之Promise

简介: javaScript杂谈之Promise

宏观和微观任务

JavaScript 引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在 Node 术语中,也会把这个部分称为事件循环。


这里每次的执行过程,其实都是一个宏观任务。我们可以大概理解:宏观任务的队列就相当于事件循环。


在宏观任务中,JavaScript 的 Promise 还会产生异步代码,JavaScript 必须保证这些异步代码在一个宏观任务中完成,因此,每个宏观任务中又包含了一个微观任务队列:


Promise


Promise 是 JavaScript 语言提供的一种标准化的异步管理方式,它的总体思想是,需要进行 io、等待或者其它异步操作的函数,不返回真实结果,而返回一个“承诺”,函数的调用方可以在合适的时机,选择等待这个承诺兑现(通过 Promise 的 then 方法的回调)。


promise基本用法如下:

function sleep (duration) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve,duration);   
    })
}
sleep(1000).then(() => console.log('ok'))

这段代码定义了一个函数sleep 它的作用是等候传入参数指定时长。

promise的then回调是一个异步的执行过程。

var r = new Promise(function(resolve,reject){
    console.log('a')
    resolve()
})
r.then(() => console.log("c"))
console.log("b")

打印出来的结果是abc/ 在进入c之前,对象r已经得到了resolve,但是promise为异步操作,所以c无法出现在b之前。


与setTimeout 一起执行promise


var r= new Promise(function (resolve,reject){
    console.log("a")
    resolve()
})
setTimeout(() => console.log("d"),0)
r.then(() => console.log("c"))
console.log("b")

得到的结果为abcd。为什么d在后面呢?

因为promise是JavaScript引擎内部的微任务,而setTimeout是游览器的api,它产生宏任务。

function sleep(duration){
    return new Promise(function(resolve,reject){
        console.log("b")
        setTimeout(resolve,duration)
    })
}
console.log("a")
sleep(5000).then(() => console.log("c"))

此段代码执行结果为abc


a先执行,结束之后promise执行,之后在五秒响应后又调用了resolve.然后c在执行。


async / await

async函数是一种特殊语法,特征是在function关键字之前加上async关键字,这样就定义了一个async函数,我们可以在其中使用await来等待一个promise。


function sleep (duration){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,duration);
    })
}
async function foo() {
    console.log("a")
    await sleep(2000)
    console.log("b")
}

async函数强大在于它是可以嵌套的,可以利用async函数组合出新的async函数。

function sleep(duration){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,duration)
    })
}
async function foo(name){
    await sleep(2000);
    console.log(name)
}
async function foo2() {
    await foo("a")
    await foo("b")
}


目录
相关文章
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
15 1
|
1月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
25 4
|
1月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
1月前
|
前端开发 JavaScript
js开发:请解释Promise是什么,以及它如何解决回调地狱(callback hell)问题。
Promise是JavaScript解决异步操作回调地狱的工具,代表未来可能完成的值。传统的回调函数嵌套导致代码难以维护,而Promise通过链式调用`.then()`和`.catch()`使异步流程清晰扁平。每个异步操作封装为Promise,成功时`.then()`传递结果,出错时`.catch()`捕获异常。ES6的`async/await`进一步简化Promise的使用,使异步代码更接近同步风格。
19 1
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
2月前
|
前端开发 JavaScript UED
JavaScript中的异步编程和Promise
【2月更文挑战第3天】在Web开发中,JavaScript是一门非常重要的编程语言,而异步编程是JavaScript中的一个关键概念。本文将介绍JavaScript中的异步编程特点,以及如何使用Promise来更加优雅地处理异步操作,帮助开发者更好地理解和应用这一技术。
17 3
|
2月前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
20 8
|
2月前
|
前端开发 JavaScript
JavaScript中的异步编程与Promise
【2月更文挑战第1天】在Web开发中,JavaScript是一种常用的编程语言,而异步编程是其重要特点之一。本文将介绍JavaScript中的异步编程机制,探讨Promise对象的使用以及如何通过Promise处理异步操作,帮助读者更好地理解和应用JavaScript异步编程技术。
|
2月前
|
前端开发 JavaScript
JavaScript中的异步编程及Promise的应用
在前端开发中,异步编程是常见的需求,而Promise作为一种解决异步操作的技术,具有很高的应用价值。本文将介绍JavaScript中的异步编程原理,并结合实际案例详细讲解Promise的使用方法及其在前端开发中的应用。
13 2
|
2月前
|
前端开发 JavaScript
JavaScript 中的异步编程:Promise 和 Async/Await 的实现与应用
在Web开发中,JavaScript异步编程是一个不可忽视的重要话题。本文将深入探讨JavaScript中Promise和Async/Await的实现原理与应用场景,通过实例代码带您了解如何优雅地处理异步操作,提升代码的可读性和可维护性。