JavaScript_同步与异步、Promise、async/await、微任务与宏任务

左手的ㄟ右手 2023-01-06 12:55 170阅读 0赞

**JavaScript\_同步与异步、Promise、async/await、微任务与宏任务**

--------------------

*  **同步与异步示例：**

console.log("a")
    console.log("b")
    setTimeout(() => { console.log("异步操作")}, 2000)
    console.log("c")
    console.log("d")

![在这里插入图片描述][20210114173714804.png]

--------------------

*  **JQuery 的 Ajax 请求示例：**

console.log("1")
    
    $.ajax({ 
    	type: 'get',
    	url: "http://localhost:8080/test",
    	success: function(response){ 
    		console.log(response)
    	}
    })
    
    console.log("2")

![在这里插入图片描述][20210114193903210.png]

--------------------

*  **Promise**

var promise = new Promise(function(resolve,reject){ 
    	resolve("abc")
    })
    
    promise.then(function(res){ 
    	console.log("成功："+ res)
    }).catch(function(error){ 
    	console.log("失败："+ error)
    })

![在这里插入图片描述][20210114195137838.png]  
**使用箭头函数改写：**

var promise = new Promise(function(resolve,reject){ 
    	reject("123")
    })
    
    promise.then(res => { 
    	console.log("成功："+ res)
    }).catch(error => { 
    	console.log("失败："+ error)
    })

![在这里插入图片描述][20210114195527536.png]

--------------------

*  **Promise.all**

Promise.all 将多个 Promise 实例包装成一个新的 Promise 实例，成功时返回一个数组，失败时返回最先被 reject 的那个值。

var p1 = new Promise(function(resolve,reject){ 
    	resolve("1")
    })
    var p2 = new Promise(function(resolve,reject){ 
    	resolve("2")
    })
    
    Promise.all([p1,p2]).then( res => { 
    	console.log(res)
    }).catch( error => { 
    	console.log(error)
    })

![在这里插入图片描述][20210114201139480.png]

var p1 = new Promise(function(resolve,reject){ 
    	resolve("1")
    })
    var p2 = new Promise(function(resolve,reject){ 
    	reject("2")
    })
    
    Promise.all([p1,p2]).then( res => { 
    	console.log(res)
    }).catch( error => { 
    	console.log(error)
    })

![在这里插入图片描述][2021011420130362.png]

--------------------

*  **Promise.race**

Promise.race 获取所有 Promise 实例中最快返回的值，无论成功或者失败。

var p1 = new Promise(function(resolve,reject){ 
    	setTimeout(() => { resolve("1")}, 1000)
    })
    var p2 = new Promise(function(resolve,reject){ 
    	setTimeout(() => { reject("2")}, 500)
    })
    
    Promise.race([p1,p2]).then( res => { 
    	console.log(res)
    }).catch( error => { 
    	console.log(error)
    })

![在这里插入图片描述][20210114202023727.png]

--------------------

*  **async / await**

async 用于声明一个 function 为异步函数  
await 用于等待一个异步方法执行完成，如果等待的方法没有执行完成，则await之后的代码将处于阻塞状态

async function f1() { 
    	return new Promise((resolve, reject) => { 
    		setTimeout(() => {  resolve("1111") },3000)
    	})
    }
    
    async function f2() { 
    	var res = await f1()
    	console.log("-----")
    	console.log(res)
    }
    
    f2()

![在这里插入图片描述][20210114205131520.png]  
如果 await 等待的异步方法返回的是 reject，则需要使用 try/catch 代码块来捕获：

async function f1() { 
    	return new Promise((resolve, reject) => { 
    		setTimeout(() => {  reject("2222") },3000)
    	})
    }
    
    async function f2() { 
     	try{ 
     		var res = await f1()
    		console.log("-----")
    		console.log(res)
    	}catch(error){ 
    		console.log(error)
    	}
    }
    
    f2()

![在这里插入图片描述][2021011421033623.png]

--------------------

*  **微任务与宏任务**

宏任务：script整体代码、setTimeout、setInterval、setImmediate、I/O、UI rendering  
微任务：promise、Object observe、MutationObserver

首先执行第一个宏任务：script整体代码，按序执行其中的微任务，然后按序执行其中的宏任务

console.log("a")
    setTimeout(() => { console.log("1")}, 0)
    console.log("b")
    
    Promise.resolve()
        .then(() => { 
        	console.log("c")
    	})
        .then(() => { 
        	console.log("d")
    	})
    
    setTimeout(() => { console.log("2")}, 0)
    console.log("e");

![在这里插入图片描述][20210114212428385.png]

[20210114173714804.png]: /images/20221119/c5e5dcf64af14ce38cc9ac2a64bd4eba.png
[20210114193903210.png]: /images/20221119/3b7a5dc8261b492991ba584c2465567a.png
[20210114195137838.png]: https://img-blog.csdnimg.cn/20210114195137838.png
[20210114195527536.png]: https://img-blog.csdnimg.cn/20210114195527536.png
[20210114201139480.png]: https://img-blog.csdnimg.cn/20210114201139480.png
[2021011420130362.png]: https://img-blog.csdnimg.cn/2021011420130362.png
[20210114202023727.png]: https://img-blog.csdnimg.cn/20210114202023727.png
[20210114205131520.png]: https://img-blog.csdnimg.cn/20210114205131520.png
[2021011421033623.png]: https://img-blog.csdnimg.cn/2021011421033623.png
[20210114212428385.png]: https://img-blog.csdnimg.cn/20210114212428385.png