• 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)
    }
  • 相关阅读:
    mysql数据库常用指令
    解决windows的mysql无法启动 服务没有报告任何错误的经验。
    “Can't open file for writing”或“operation not permitted”的解决办法
    启动Apache出现错误Port 80 in use by "Unable to open process" with PID 4!
    如何打开windows的服务services.msc
    常见的HTTP状态码 404 500 301 200
    linux系统常用的重启、关机指令
    (wifi)wifi移植之命令行调试driver和supplicant
    linux(debian)安装USB无线网卡(tp-link TL-WN725N rtl8188eu )
    alloc_chrdev_region申请一个动态主设备号,并申请一系列次设备号
  • 原文地址:https://www.cnblogs.com/helzeo/p/11823007.html
Copyright © 2020-2023  润新知