web前端练习19----es6新语法6，异步任务 Promise

百度搜索 mdn promise

 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise 基本用法，模拟请求 数据

        function myAsyncTask(time) {
            var promise1 = new Promise(function (success, failure) {

                // 模拟异步请求数据
                setTimeout(function () {
                    // 拿到一个随机数的整数
                    let num = Math.round(Math.random() * 100);
                    // 这个整数是否能被2整除
                    let yu = num % 2;
                    if (yu == 0) {
                        // 能整除，成功
                        success('数据请求成功');
                        console.log('******success');
                    } else {
                        // 不能整除，失败
                        failure('数据请求失败')
                        console.log('******failure');
                    }


                }, time);
            });
            return promise1;
        }


        // 接收请求成功或失败的数据
        myAsyncTask(3000)
            .then(
                function (success) {
                    console.log(success);
                }, function (failure) {
                    console.log(failure);
                });

连续 then 执行

        //把请求结果传到这里
        myAsyncTask(3000)
            .then(
                function (success) {
                    console.log(success);
                }, function (failure) {
                    console.log(failure);
                })
            .then(
                // 上面的then执行完了，无论成功失败，这里立即执行成功的函数，数据传不过来
                function (success) {
                    console.log(`上面执行完了，执行这里>>>${success}`);
                }
            );

请求完成后，继续请求数据

        myAsyncTask()
            .then(
                function (success) {
                    console.log(success);
                    // 数据请求成功，则第二次请求数据
                    return myAsyncTask();
                }, function (failure) {
                    console.log(failure);
                    // 数据请求失败，则第二次请求数据
                    return myAsyncTask();
                })
            .then(
                function (success) {
                    console.log(`第二次请求数据的返回值${success}`);
                }, function (failure) {
                    console.log(`第二次请求数据的返回值${failure}`);
                }
            );

Promise.all 多个异步任务，同时执行

        let promise1 =myAsyncTask(3000);
        let promise2 =myAsyncTask(6000);
        // 两个异步任务同时执行
        let promiseAll=Promise.all([promise1,promise2]);
        promiseAll.then(
            // 所有异步任务成功，返回到这里,打印所有任务返回的数据
            function (success) {
                console.log(`所有任务执行成功>>>${success}`);

            }, function (failure) {
                // 有一个不成功返回到这里，打印这个失败信息
                console.log(`有一个任务被拒绝>>>${failure}`);

            }
        );

Promise.race 第一个任务成功或者失败，就返回

        //race 第一个任务成功或者失败，就返回
        let promise1 = myAsyncTask(3000);
        let promise2 = myAsyncTask(6000);
        // 两个异步任务同时执行
        let promiseRace = Promise.race([promise1, promise2]);
        promiseRace.then(
            function (success) {
                // 多个任务，第一个成功返回这里，其它的不返回了
                console.log(`有一个执行成功>>>${success}`);
            }, function (failure) {
                // 多个任务，第一个失败返回这里，其它的不返回了
                console.log(`失败>>>${failure}`);

            }
        );

Promise 依次执行多个任务

 // Promise 依次执行多个任务
        function myAsyncTask1() {
            var promise1 = new Promise(function (resolve, reject) {

                // 模拟异步请求数据
                setTimeout(function () {
                    console.log('第一次调用');
                    resolve({ data: 'first' });

                }, 3000);
            });
            return promise1;
        }

        function myAsyncTask2() {
            var promise2 = new Promise(function (resolve, reject) {

                // 模拟异步请求数据
                setTimeout(function () {
                    console.log('第二次调用');
                    resolve({ data: 'second' });

                }, 3000);
            });
            return promise2;
        }

        function myAsyncTask3() {
            var promise3 = new Promise(function (resolve, reject) {

                // 模拟异步请求数据
                setTimeout(function () {
                    console.log('第三次调用');
                    resolve({ data: 'thrid' });

                }, 3000);
            });
            return promise3;
        }

        function result(data) {
            console.log(data);
        }
        // 依次调用，调第一个成功，调第二个成功，调第三个成功
        myAsyncTask1()
            .then(result)
            .then(myAsyncTask2)
            .then(result)
            .then(myAsyncTask3)
            .then(result);

Promise 使用 for 循环，依次执行多个任务

  // Promise 使用 for 循环，依次执行多个任务
        var tasks = [
            { name: '张1', time: 1000 },
            { name: '张2', time: 1000 },
            { name: '张3', time: 1000 },
            { name: '张4', time: 1000 },
            { name: '张5', time: 1000 },
            { name: '张6', time: 1000 },

        ];
        function iAsyncTask(person) {
            var promise = new Promise((resolve, reject) => {

                // 模拟异步请求数据
                setTimeout(function () {
                    resolve(person);
                }, person.time);

            });
            return promise;
        }

        console.log('任务开始');

        let promise = iAsyncTask(tasks[0]);
        
        for (let i = 0; i < tasks.length; i++) {
            // 把产生的对象赋值找这里，promiseReluet和promise，是同一对象
            // promiseReluet是发消息，promise是接收消息，自己发的消息，自己才能接收到
            promise = promise.then(msg => {
                console.log(msg);
                if (i < tasks.length - 1) {
                    // 产生了一个对象
                    let promiseReluet = iAsyncTask(tasks[i + 1]);
                    return promiseReluet;
                } else {
                    console.log('任务全部完成');
                }

            });

        }