异步(基础)

一、同步和异步有何不同

单线程和异步

  • js是单线程语言,只能同时做一件事
  • 浏览器和node.js已支持JS启动进程,如Web Worker
  • JS和DOM渲染共用同一个线程,因为JS可修饰DOM结构
  • 遇到等待(网络请求,定时任务)时不能卡住,就需要异步
  • 回调callback函数的形式
  • 异步的必要性:基于JS是单线程语言
  • 异步不会阻塞代码执行
  • 同步会阻塞代码执行

JS如何执行

  • 从前到后,一行一行执行
  • 如果某一行执行报错,则停止下面代码的执行
  • 先把同步代码执行完,再执行异步代码

同步

        //同步
        console.log(111);
        alert(222)
        console.log(333);

异步

        //异步
        console.log(100);
        setTimeout(()=>{
            console.log(200);
        },2000);
        console.log(300);

 异步的应用场景

  • 网络请求,如Ajax图片加载
  • 定时任务,如setTimeout

promise的基本应用

promise的出现:callback hell的不合理性

callback hell:

        //获取第一份数据
        $.get(url1, (data1) => {
            console.log(data1);

            //获取第二份数据
            $.get(url2, (data2) => {
                console.log(data2);

                //获取第三份数据
                $.get(url3, (data3) => {
                    console.log(data3);
                })
            })
        })

promise

        function getData(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    success(data) {
                        resolve(data)  //返回resolve执行then语句
                    },
                    error(err) {
                        reject(err)    //返回reject执行catch语句
                    }
                })
            })
        }

        const url1 = '/data1.json'
        const url2 = '/data2.json'
        const url3 = '/data3.json'
        getData(url1).then(data1 => {
            console.log(data1);
            return getData(url2)
        }).then(data2 => {
            console.log(data2);
            return getData(url3)
        }).then(data3 => {
            console.log(data3);
        }).catch(err => console.error(err))

promise把回调函数写成管道式串联的形式,不是callback hell的嵌套形式,有利于调试和阅读

面试题

手写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
        }

        const url = 'https://www.imooc.com/static/img/index/logo2020.png'
        loadImg(url).then(img =>{
            console.log(img.width);
            return img
        }).then(img => {
            console.log(img.height);
        }).catch(ex => { console.Error(ex) })

setTimeout笔试题

        console.log(1);
        setTimeout(() => {
            console.log(2);
        },1000)
        console.log(3);
        setTimeout(() => {
            console.log(4);
        },0)
        console.log(5);

        //打印顺序 1 3 5 4 2 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值