ES6 Promise 对象理解

来源：互联网发布：财务评价软件编辑：程序博客网时间：2024/06/05 08:35
        // 新建对象就开始跑代码了        function loadImagePromise(ms) {            let letime = ms * 1000;            return new Promise(function (resolve, reject) {                console.log("Promise" + ms + " start :" + Date.parse(new Date()));                setTimeout(resolve.bind(null, letime), letime);            });        }        function addImg(e) {            console.log(e + "this is ok :" + Date.parse(new Date()));        }        // 这个是运行完一个接着一个        // 主要原因是新建的Promise对象的顺序不同,区别在 相对于 act2        // 这里面的阻塞原理是 then的执行顺序 ,如果返回 Resolved状态的Promise,就会执行下一个回调。        // 但Pending状态的Promise 会等待其变成Resolved状态 才执行下一回调        function act1() {            Promise.resolve()                    .then(() => loadImagePromise(3)).then(addImg)                    .then(() => loadImagePromise(2)).then(addImg)                    .then(() => loadImagePromise(1)).then(addImg)                    .catch(err => console.log(err))        }        // 这个是一开始就全部开始运行,但是会阻塞,按照代码执行顺序去阻塞,而不是按照运行时间        // 这个时间是指Promise 变成 Resolved状态 的时间,例如本例中的1,2,3 时间 ,表示p1,p2,p3 到变成Resolved状态所需时间        // 换句话说就是这里面的运行时间 约等于 最迟 变成Resolved状态的时间        // 这个代码执行顺序是指 act1 说的执行顺序        function act2() {            let p1m = 3, p2m = 2, p3m = 1;//            let p1m=1,p2m=2,p3m=3;            let p1 = new Promise(function (resolve, reject) {                console.log("Promise" + p1m + " start :" + Date.parse(new Date()));                setTimeout(resolve.bind(null, p1m * 1000), p1m * 1000);            });            let p2 = new Promise(function (resolve, reject) {                console.log("Promise" + p2m + " start :" + Date.parse(new Date()));                setTimeout(resolve.bind(null, p2m * 1000), p2m * 1000);            });            let p3 = new Promise(function (resolve, reject) {                console.log("Promise" + p3m + " start :" + Date.parse(new Date()));                setTimeout(resolve.bind(null, p3m * 1000), p3m * 1000);            });            Promise.resolve()                    .then(x => p1).then(addImg)                    .then(x => p2).then(addImg)                    .then(x => p3).then(addImg)                    .catch(err => console.log(err))        }        //这个是一开始就全部开始运行,但是会阻塞,按照代码执行顺序去阻塞,而不是按照运行时间        //这个 和 act2 一样,但和 act1 不一样        function act3() {            let tasks = [                loadImagePromise(3),//(3)                loadImagePromise(2),//(2)                loadImagePromise(1)//(1)            ]            tasks.reduce((promise, item) => {                return promise.then(() => item).then(addImg)            }, Promise.resolve())        }        // 这个是一开始就全部开始运行,但是会阻塞,按照运行时间去阻塞,而不是按照代码执行顺序        // 这个时间是指Promise列表中最迟变成Resolved状态的时间,例如本例中的3为最迟时间阻塞,3秒后才运行 then 回调        // 这个 代码执行顺序是指 新建Promise对象,就是数组的顺序,没什么特别的        function act4() {            Promise.all([                loadImagePromise(1),                loadImagePromise(2),                loadImagePromise(3)            ]).then(imgs => imgs.forEach(addImg))        }        //异步,,不阻塞,谁先完成谁就执行他的回调函数        function act5(){            [1,2,3].forEach(t => loadImagePromise(t).then(addImg));        }//        act1();        act2();//        act3();//        act4();//        act5();
一切尽在代码中
0 0