Promise

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 获取数据 .then是单层的，是管道形式

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.lg(data2)
    return getData(url3)
}).then(data3=>{
    console.log(data3)
}).catch(err=>console.error(err))

异步和同步的区别

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

promise加载一个图片

        const url1 ="https://cdn.rsjoomla.com/images/blog/easter2017/blog-easter-2017.jpg"
const url2="https://www.crazyparts.co.nz/media/wysiwyg/home_page/promotion/easter/Easter-event-1200.jpg"

function loadImg(src){
    return new Promise(
        (resolve,reject)=>{
            const img = document.createElement('img')
            img.onload=()=>{
                resolve(img)
            }
            img.onerror=()=>{
                const err = new Error('fail to load image${src}')
                reject(err)
            }
            img.src=src 
        }
    )

}

/* loadImg(url).then(img=>{
    console.log(img.width)
    return img
}).then(img=>{
    console.log(img.height)
}).catch(ex=>console.error(ex)) */

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