ES6 Promise的简单使用

 //Promise是一个容器,保存某个异步的操作
        //有三种状态,进行中、已成功、已失败
        //resolve代表成功的回调函数;reject代表失败的回调函数

        // let promise=new Promise(function(resolve,reject){
        //     //相关的异步操作
        //     //.....

        //     if(异步操作成功){
        //         resolve(value)
        //     }else{
        //         reject(value)
        //     }
        // })

        //通过then()方法向Promise传递成功和失败的回调函数
        //then()在Promise的原型对象上
        //console.log(Promise)

        // promise.then(function(){
        //     //成功的回调函数
        // },function(){
        //     //失败的回调函数
        // })

        //Promise实例对象创建之后,参数function会被立即调用
        // let promise=new Promise(function(resolve,reject){
        //     console.log("promise")
        //     //异步操作结束后
        //     resolve()
        // })

        // promise.then(function(){
        //     console.log("resolve")
        // })
        // console.log("Hi")


        function loadImage(url) {
            return new Promise(function (resolve, reject) {
                //执行图片加载
                let image = new Image()
                image.src = url

                image.onload = function () {
                    console.log("图片加载成功")
                    resolve({ width: image.width, height: image.height })
                }

                image.onerror = function (event) {
                    console.log("图片加载失败")
                    reject(event)
                }
            })
        }

        //成功的回调函数
        // function resolve(data) {
        //     console.log("图片加载完成后=>执行处理")
        //     console.log("返回的数据:", data)
        // }
        //失败的回调函数
        // function reject() {
        //     console.log("图片加载失败后=>执行处理")
        // }

        let url = "http://static.699pic.com/best_album/57.jpg!/fw/316"
        //loadImage(url).then(resolve, reject)
        
        loadImage(url).then(function (data) {
            console.log("图片加载完成后=>执行处理")
            console.log("返回的数据:", data)
        }, function (error) {
            console.log("图片加载失败后=>执行处理")
            console.log(error)
        })
posted @ 2021-02-26 09:54  abcdefgab  阅读(72)  评论(0)    收藏  举报