7-异步基础-一一网

异步和单线程

面试题目

1 同步和异步的区别是什么？
2 手写用Promise加载一张图片
3 前端使用异步的场景有哪些
复制代码

同步和异步的区别是什么？
- 基于JS是单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行
手写用Promise加载一张图片

//图片加载
function loadImg(src){
    return 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
    })
}

const url = 'https://img.xxx';
loadImg(url).then(img =>{
    console.log(img.width);
    return img;
}).then(img=>{
    console.log(img.height)
}).catch(err=>console.error(err))

//解决回调地狱的问题：
const url1 = 'https://img1.xxx';
const url2 = 'https://img2.xxx';

loadImg(url1).then(img1 =>{
    console.log(img.width);
    return img1;
}).then(img1=>{
    console.log(img1.height)
    return loadImg(url2);
}).then(img2=>{
    console.log(img2.width)
    return img2;
}).then(img2=>{
    console.log(img2.height)
}).catch(err=>console.error(err))

复制代码

前端使用异步的场景有哪些
- 网络请求，如ajax图片加载
- 定时任务，如setTimeout
setTimeout笔试题

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

答案：1 3 5 4 2
复制代码

知识点

单线程和异步
应用场景
callback hell 和 Promise

单线程和异步

JS是单线程语言，只能同时做一件事儿
浏览器和nodejs已支持JS启动进程，如Web Worker
JS和DOM渲染共用同一个线程，因为JS可修改DOM结构
遇到等待（网络请求，定时任务）不能卡住，需要异步
回调callback函数形式

异步

//异步
console.log(100)
setTimout(function(){
    console.log(200)
},1000)
console.log(300)
复制代码

同步

//同步
console.log(100)
alert(200)
console.log(300)
复制代码

异步和同步

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

异步应用场景

网络请求，如ajax图片加载

//ajax
console.log('start')
$.get('./data1.json',function(data1){
    console.log(data1)
})
console.log('end')
复制代码

//图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){
    console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')
复制代码

定时任务，如setTimeout

//定时
//1
console.log(100)
setTimout(function(){
    console.log(200)
},1000)
console.log(300)
//2
console.log(100)
setInterval(function(){
    console.log(200)
},1000)
console.log(300)

复制代码

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)
            },
            error(err){
                reject(err)
            }
        })
    })
}
复制代码

Promise的使用

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)
})
复制代码