异步（promise）和单线程

一，异步和单线程

1，同步和异步的区别

（1）基于JS是单线程语言 只能做一件事儿（异步是由于单线程而来）

（2）异步不会阻塞代码执行

（3）同步会阻塞代码执行

遇到等待（网络请求，定时任务）不能卡住。不然界面会卡在那动不了
所以需要异步（就是解决单线程）
浏览器和node.js已经支持JS启动进程，比如Wbeworker
回调callback函数形式
基于JS是单线程语言 异步不会阻塞代码的执行
Promise 异步主要是解决回调地狱的问题

2，手写Promise加载一张图片（代码演示）

//手写Promise加载一张图片（代码演示）
function loadImg(src) {
    return new Promise((resolve, reject) => { //返回一个new Promise
        const img = document.createElement('img')
        img.onload = () => { //加载完成之后的一个回调函数
            resolve(img) //执行完之后再把img返回
        }
        img.onerror = () => {
            reject(new Error(`图片加载失败 ${img}`)) //出现问题就调用这个Error
        }
        img.src = src
    })
}
// 执行函数 返回的是一个Promise对象 而对象里面有一个then  成功的话得接收img
// loadImg(url).then(img => {
//     console.log(img.width);
//     return img  //这个img就会被传入到下一个then函数里面
// }).then(img => {
//     console.log(img.height);
// }).catch(ex => {
//     console.log(ex);
// })
const url1 = 'https://himg.bdimg.com/sys/portraitn/item/public.1.ba5c74eb.V4uF1WBpKGR6GvjDHOlkrA'
const url2 = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
loadImg(url1).then(img1 => {
    console.log(img1.width);
    return img1 //返回一个img1对象
}).then(img1 => {
    console.log(img1.height);
    return loadImg(url2) //返回一个promise实例
}).then(img2 => {
    console.log(img2.width);
    return img2
}).then(img => {
    console.log(img.height);
}).catch(ex => {
    console.log(ex);
})

3，异步应用场景

网络请求 ajax图片加载

定时任务 setTimeout