es6-14 Promise

Promise 基本定义

es5 中的回调

{
    let ajax = function (callback) {
        console.log('执行')
        setTimeout(() => {
            callback && callback.call()
        }, 1000)
    }
    ajax(function () {
        console.log('回调了')
    })
}

使用 Promise

{
    let ajax = function () {
        console.log('执行')
        return new Promise(function(resolve, reject){
            // resolve() 执行下一步操作
            // reject() 中断当前操作
            setTimeout(() => {
                resolve('哈哈')
            }, 1000);
        })
    }
    ajax()
    .then(function (res) {
        console.log(`回调了${res}`)
    })
}

多层嵌套示例

{
    let ajax = function () {
        console.log('执行')
        return new Promise(function(resolve, reject){
            // resolve() 执行下一步操作
            // reject() 中断当前操作
            setTimeout(() => {
                console.log('洗菜')
                resolve('洗菜')
            }, 1000);
        })
    }
    ajax()
    .then(function (res) {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log(`${res}=>切菜`)
                resolve(`${res}=>切菜`)
            }, 1000);
        })
    })
    .then(function (res) {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                console.log(`${res}=>炒菜`)
            }, 1000);
        })
    })
}

Promise 捕获异常错误

{
    let ajax = function (num) {
        console.log('执行')
        return new Promise(function(resolve, reject){
            if (num > 5) {
                resolve(num)
            } else {
                throw Error(`${num}比5小`)
            }
        })
    }
    ajax(6).
    then(function (res) {
        console.log(res)
    }).
    catch(function(err){
        console.log(err)
    })

    ajax(3).
    then(function (res) {
        console.log(res)
    }).
    catch(function(err){
        console.log(err)
    })
}

 Promise.all

{
    // 所有图片加载完在添加到页面
    function loadImg(src) {
        return new Promise((resolve,reject) => {
            let img = document.createElement('img')
            img.src = src
            img.onload = function () {
                resolve(img)
            }
            img.onerror = function (err) {
                reject(err)
            }
        })
    }

    // 添加到页面函数
    function showImgs (imgs) {
        imgs.forEach(img => {
            document.body.appendChild(img)
        })
    }

    // Promise.all 当所有图片加载完成之后, 在调用 showImgs 函数将图片添加到页面
    Promise.all([
        loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/07/31/1564559889321467.png?imageView2/2/w/720'),
        loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/10/12/1570881387228659.jpg?imageView2/2/w/720'),
        loadImg('http://ztjy-img-dev.szytest.com/ztnew/ad/img/2019/03/07/1551929811422795.jpeg')
    ]).then(showImgs)
}

 

Promise.race

{
    // 有一个图片加载完就添加到页面
    function loadImg(src) {
        return new Promise((resolve,reject) => {
            let img = document.createElement('img')
            img.src = src
            img.onload = function () {
                resolve(img)
            }
            img.onerror = function (err) {
                reject(err)
            }
        })
    }

    // 添加到页面函数
    function showImgs (img) {
        let p = document.createElement('p')
        p.appendChild(img)
        document.body.appendChild(p)
    }

    // Promise.race 实例中有一个状态改变就执行 showImgs 函数
    Promise.race([
        loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/07/31/1564559889321467.png'),
        loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/10/12/1570881387228659.jpg'),
        loadImg('http://ztjy-img-dev.szytest.com/ztnew/ad/img/2019/03/07/1551929811422795.jpeg')
    ]).then(showImgs)
}