Asynchronous Recursion

Developer
Ian Joubert
Size
3,390 Kb
Views
12,144
  1. Asynchronous Recursion Previews
  2. Asynchronous Recursion HTML Codes
  3. Asynchronous Recursion CSS Codes
  4. Asynchronous Recursion JS Codes

How do I make an asynchronous recursion?

This pen is to illustrate recursion using promise based http requests. It mocks the server api method and then build a re-usable function that is called with an increasing position argument to get new data at each position. It then accumulates all the data and return the result. What is a asynchronous recursion? How do you make a asynchronous recursion? This script and codes were developed by Ian Joubert on 10 November 2022, Thursday.

Asynchronous Recursion Previews
IQ Test

Asynchronous Recursion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Asynchronous Recursion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
<div class="container">	<img src="https://s.gravatar.com/avatar/004182992aa38d718fabcee7d643cec2?s=80"/>	<article layout="column" layout-align="center center" flex>	<h1 class="title">Promise Based Recursion</h1>	<small>This Codepen was developed by: Ian Joubert</small>	<h3>Recursively fetch data asynchronously from server api</h3>	<p>This pen is to illustrate recursion using promise based http requests. It mocks the server api method and then build a re-usable function that is called with an increasing position argument to get new data at each position. It then accumulates all the	data and return the result.</p>	</article>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.js'></script> <script src="js/index.js"></script>
</body>
</html>

Asynchronous Recursion - Script Codes CSS Codes

body { font-family: Sans-serif;
}
.container { text-align: center;
}
.title { font: 700 3rem Sans-serif; color: #feda44; text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.25); margin: 0;
}
article h3 { color: rgba(0, 0, 0, 0.4); margin: 8px 0 4px;
}
article small { color: rgba(0, 0, 0, 0.2);
}
article p { color: rgba(0, 0, 0, 0.4); text-align: center; line-height: 1.2em;
}

Asynchronous Recursion - Script Codes JS Codes

var position = 0
var userId = 'a1b2c3', categoryId = 2
var data = ['Test1','Test2'], response = {position:1,data:['Test3','Test4']}
var arguments = [userId,categoryId]
// This is a mock HTTP function to mimick an asynchronous server request
function mockHttpRequest(){	console.log('HTTP request called with arguments: ',arguments)	// The following is just to mimick a server api request	position++	position = position>2?undefined:position	return new Promise(function(resolve){	response.position = position	resolve(response)	})
}
// This is a constructor to build "HTTPGet" functions
function getDataConstructor(func,args){	var newArgs = _.remove(args,_.isArray)[0]	newArgs.unshift(_.remove(args,_.isInteger)[0]||0)	return function(newPos){	newArgs[0]= newPos || newArgs[0]	return func.apply(func,newArgs)	}
}
//This asynchronous and recursively fetches data with the constructed "HTTPGet" function
function getDataRecursiveAsync(pos,arr,func){	return func(pos).then(function(res){	if(res.data){	arr = arr.concat(res.data)	}	if(res.position){	return getDataRecursiveAsync(res.position,arr,func)	}	else{	return arr	}	})
}
// The "HTTPGet" function that is build with the "getDataConstructor"
// It takes => "HTTPRequest" function, and => [first position,[http request arguments]]
var getDataFunc = getDataConstructor(mockHttpRequest,[arguments,position])
getDataRecursiveAsync(position,[],getDataFunc).then(function(res){	console.log('Response: ',res)
})
Asynchronous Recursion - Script Codes
Asynchronous Recursion - Script Codes
Home Page Home
Developer Ian Joubert
Username Studira
Uploaded November 10, 2022
Rating 3
Size 3,390 Kb
Views 12,144
Do you need developer help for Asynchronous Recursion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ian Joubert (Studira) Script Codes
Name
Ionic Modal Directive
Parsing Locale data from official source
Changing CMYK colors into RGB and Hex values
Probabilistic N-Gram Dataset Merge
Asynchronous Functions
Hashing Credit Card Number
Bleeding Scope Variables
ES6 Template Strings - Tagged Templates
Angular Test Template
A Pen by Ian Joubert
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!