手写Promise加载一张图片

Promise产生的原因

常见的回调地狱场景：

// 回调地狱  callback hell
// 获取第一份数据
$.get(url1, (data1) => {
    console.log(data1)
    //获取第二份数据
    $.get(url2, (data2) => {
        console.log(data2)
        //获取第三份数据
        $.get(url3, (data3) => {
            console.log(data3)
            //...
        })
    })
})

如上所示，多异步容易出现以下问题：

多异步返回的执行顺序不可控。
多异步的异常错误处理非常繁杂。
多异步嵌套，会导致回调地狱。

我们急需要一个能够保证异步执行顺序，保证执行和抛出错误的异步处理的保证范式来解决这些问题。ES6给我们的答案就是Promise。

用 promise处理同样的多异步问题：

function getData(url) {
            return new Promise((resolve, reject) => {
        $.ajax({
            url,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(data)
            }
        })
    })
}
var url1 = '/datà1.json'
var url2 = '/datà2.json'
var url3 = '/datà3.json'
getData(url1).then(data1 => {
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    console.log(data1)
    return getData(url3)
}).then(data3 => {
    console.log(data3)
}).catch(err => {
    console.log(err)
})

promise把callback 形式变成了非嵌套的形式，变成了串联的形式

使用Promise加载一张图片

function loadImg(src2) {
    return new Promise(
        //参数 resolve reject 均是函数
        (resolve,reject)=>{
            const img1 = document.createElement('image')
            img1.src = src2
            img1.onload=()=>{
                resolve(img1)
            }
            img1.onerror=()=>{
                const err = new Error(`图片加载失败！${src}`)
                reject(err)
            }
            
        }
    )
}
const url1 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
const url2 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
loadImg(url1).then(img=>{
    console.log(img.width)
    return img
}).then(img=>{
    console.log(img.height)
    return loadImg(url2)
}).then(img2=>{
    console.log(img2.width)
    return img2
}).then(img2=>{
    console.log(img2.height)
})
.catch(err=>{
    console.log(err)
})