前端面试题：JS基础-异步

鹏城昊

于 2022-04-26 22:44:33 发布

阅读量603

点赞数

分类专栏：面试问题：js基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_18709575/article/details/124437785

版权

本文探讨JavaScript中的异步概念，包括同步与异步的区别、Promise的引入与使用、Event Loop的工作原理以及async/await的相关知识。通过实例解析了Promise如何解决回调地狱，并介绍了微任务与宏任务的执行顺序，最后讲解了异步的本质和for...of在异步遍历中的应用。

摘要由CSDN通过智能技术生成

前言

作者学习笔记！

异步和同步的区别

1.基于JS是单线程语言
2.异步不会阻塞代码执行
3.同步会阻塞代码执行

异步的应用场景

网络请求，如ajax图片加载
定时任务，setTimeout  setinterval

为什么有Promise？和基本使用

Promise解决了callback hell(回调地狱)

function getData(url) {
   
	return new Promise((resolve,reject)=> {
   
		$.ajax({
   
			url,
			success(data){
   
				resolve(data)
			},
			error(err){
   
				reject(err)
			}
		})
	})
}

手写Promise加载一张图片：

function loadImg(src){
   
    const p = new Promise((resolve,reject) => {
   
        const img = document.createElement('img');
        img.onload = () => {
   
            resolve(img);
        }
        img.onerror = () => {
   
            const err = new Error(`图片加载失败${
     src}`)
            reject(err)
        }
        img.src = src
    });
    return p
}


loadImg(url1).then(img1 => {
   
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
   
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).