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

Posted 2022-12-08 zhaihaohao1

百度搜索 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('任务全部完成');
                

            );