高阶函数的使用

Dr_Noooo 发布于2019-08-23 15:15 / 1498人阅读

摘要：问题字节跳动面试时问题原函数例如是一个异步函数，尝试从服务器端获取一些信息并返回一个。写一个新的函数可以自动重试一定次数，并且在使用上和原函数没有区别。解决修改后的函数如下最后自己写了个进行测试结果符合预期，问题解决。

问题

字节跳动面试时问题：原函数例如fetchData是一个异步函数，尝试从服务器端获取一些信息并返回一个Promise。写一个新的函数可以自动重试一定次数，并且在使用上和原函数没有区别。

思路

这个问题其实不是很难，不过可能是~~太菜了~~紧张的原因，当时答得不是很好。不过思路还是很明确的，内部通过闭包来计数，一旦成功获得数据就返回，否则就继续尝试，直到重试次数达到上限位置。

function retry(fetch, n) {
    let i = 0
    function tryFetch(err) {
        if (i > n) {
            return "reach try limit:" + err
        } else {
            fetch().then(data => {
                return data
            }).catch(err => {
                i ++
                tryFetch(err)
            })
        }
    }
}

当时差不多就是那么答的，有几个问题是，函数调用方式与原来不通，按道理应该返回一个Promise，更准确的说是返回一个返回Promise的函数，如果有什么问题也应该在外面能catch住。另一方面，也许fetch函数要接受参数，也应该传递进去才行。

解决

修改后的函数如下

function retry(fetch, n) {
    return function() {
        let args = arguments
        return new Promise((rseolve, reject) => {
            let i = 0
            tryFetch()
            function tryFetch(err) {
                console.log(i)
                if (i > n) {
                    reject("reach max try" + err)
                } else {
                    fetch(...args).then(data => {
                        rseolve(data)
                    }).catch(err => {
                        i ++
                        tryFetch(err)
                    })
                }
            }
        })
    }
}

最后自己写了个fetch进行测试

function fetch() {
    console.log(arguments)
    return new Promise((rseolve, reject) => {
        console.log("trying...")
        setTimeout(function() {
            if (Math.random() > 0.9) {
                console.log("resolved")
                rseolve("resolved")
            } else {
                console.log("rejected")
                reject("rejected")
            }
        }, 5000)
    })
}

结果符合预期，问题解决。当然也可以返回async function，不过和Promise本质上是一个思路。

GPU云服务器云服务器高阶函数高阶函数应用函数使用 getcursorpos函数使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101764.html

React 深入系列6：高阶组件

摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...

2shou 2019-08-22 17:28 评论0 收藏0
React高阶组件

摘要：结语高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 评论0 收藏0
深入浅出React高阶组件

摘要：博客地址背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。博客地址：http://www.luckyjing.com/post... 背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出...

yuanzhanghu 2019-08-20 18:20 评论0 收藏0
从零开始学习 React 高阶组件

01、介绍 React 高阶组件也叫做 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。那么在学习高阶组件之前有一个概念我们必须清楚，就是高阶函数。 02、高阶函数概念：高阶函数是一个函数，它接收函数作为参数或将函数作...

_Dreams 2019-08-23 16:19 评论0 收藏0
react进阶系列：高阶组件详解（一）

摘要：创建一个普通函数因为的存在所以变成构造函数创建一个方法在方法中，创建一个中间实例对中间实例经过逻辑处理之后返回使用方法创建实例而恰好，高阶组件的创建逻辑与使用，与这里的方法完全一致。因为方法其实就是构造函数的高阶组件。很多人写文章喜欢把问题复杂化，因此当我学习高阶组件的时候，查阅到的很多文章都给人一种高阶组件高深莫测的感觉。但是事实上却未必。有一个词叫做封装。相信写代码这么久了，大...

NervosNetwork 2019-08-20 17:34 评论0 收藏0
学习es7的Decorator(顺带写个react高阶组件)

摘要：为了代码进一步解耦，可以考虑使用高阶组件这种模式。开源的高阶组件使用提供了一系列使用的高阶组件，可以增强组件的行为，可以利用此库学习高阶组件的写法。通过使用此库提供的高阶组件，可以方便地让列表元素可拖动。 1. Decorator基本知识在很多框架和库中看到它的身影，尤其是React和Redux，还有mobx中，那什么是装饰器呢。修饰器（Decorator）是一个函数，用来修改类的...

xiyang 2019-08-23 12:32 评论0 收藏0