高階函數的使用

Dr_Noooo 發布于2019-08-23 15:15 / 1562人閱讀

摘要：問題字節跳動面試時問題原函數例如是一個異步函數，嘗試從服務器端獲取一些信息并返回一個。寫一個新的函數可以自動重試一定次數，并且在使用上和原函數沒有區別。解決修改后的函數如下最后自己寫了個進行測試結果符合預期，問題解決。

問題

字節跳動面試時問題：原函數例如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函數使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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