递归函数如何封装成promise？

作者: 姜治宇 | 来源:发表于2022-05-07 17:15 被阅读0次

递归函数如何封装成promise？
微信小程序-axios封装
async await
ES6 标准入门之——Async 函数
前端程序员面试你应该懂的原生JS——3
es6--Promise.all()和Promise.race(
OC如何实现Promise
Day10递归函数、模块、迭代器、生成器
day11 函数（3）
python 递归函数

我们在做大文件分片上传时，经常会使用递归来实现。
如果递归函数内部有接口调用的话，一旦执行，则无法在外部捕获到其完成的状态。promise可以拿到延时执行的结果，我们希望将递归封装成promise来执行，怎么做呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div class="cont" id="app">
        <h2>{{msg}}</h2>
        <button @click="uploadZip">
            上传
        </button>

    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0,
            maxCount: 10,
            msg: '正在等待'
        },
        methods: {
            uploadZip() {
                console.log('递归中', this.count);
                return new Promise(resolve => {
                    if (this.count > this.maxCount) { //递归退出条件
                        return this.handleZip(resolve);
                    }
                    this.count++;
                    setTimeout(() => {
                        return this.uploadZip().then(res => { //开始递归
                            if (res['code'] === 1) {
                                //递归完成
                                this.msg = '上传成功';
                            }
                        })
                    }, 500);
                });
            },
            handleZip(resolve) {

                let timer = setTimeout(() => {

                    resolve({ code: 1, status: 'success' });

                    clearTimeout(timer);
                }, 1000);
            }
        }
    })
</script>

递归一定要注意return，否则很容易陷入死循环。

pic.gif