• 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)
    }
  • 相关阅读:
    复制带有random指针的单链表
    loadrunner常见问题
    【转】性能测试、负载测试、压力测试的区别
    文件存储结构inode与RAM结构建立联系
    inode表元数据,存储在物理存储体上
    debug宏起作用应用
    linux内核常用函数或宏
    file、inode在应用层和驱动层之间的联系_转
    内核交互--sysfs
    内核交互--procfs
  • 原文地址:https://www.cnblogs.com/helzeo/p/11823007.html
Copyright © 2020-2023  润新知