JavaScript学习笔记四

最新推荐文章于 2024-09-25 18:15:20 发布

努力飞行的菜鸟

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量370

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40077712/article/details/105093536

版权

这篇博客探讨了JavaScript中的同步与异步区别，通过实例解释了如何手写Promise加载图片。文章强调了前端中使用异步的场景，如网络请求和定时任务，并讨论了单线程与异步的关系。最后，文章深入分析了回调地狱与Promise解决的问题，展示了Promise如何以更清晰的方式组织异步代码。

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

异步和单线程

文章目录

一、同步和异步的区别
二、手写用Promise 加载一张图片
三、前端使用异步的场景有哪些
四、单线程和异步（knowledge point）
五、callback hell 和 Promise （knowledge point）
- 1、callback hell
- 2、Promise

一、同步和异步的区别

answer：

异步是基于JS 单线程
异步不会阻塞代码的执行
同步会阻塞代码的执行

二、手写用Promise 加载一张图片

answer：

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
}

const url1 = 'http://123.57.52.29:8090/upload/2020/3/Pawel%20Nolbert%20%202017-06-13%2002-09-25-2ac8cd6e79794e57a6cdb1e4b7a05e76.jpg'
const url2 = 'http://123.57.52.29:8090/upload/2020/3/Ryan%20Stone%20%202018-08-24%2002-47-49-3390c5dfb2e74bd8a8b964561fcb55e9.jpg'

loadImg(url1).then(img1