DEV Community: Sabbir Hossain

JavaScript async call analysis

Sabbir Hossain — Mon, 12 Feb 2024 11:16:49 +0000

let's say we have a async function like following:

let counter = 1;
async function async_func() {
    return new Promise((resolve, reject) => { 
      setTimeout(function() {
        resolve(counter++);
      }, 500); 
  })
}

It's only task to wait 500ms and then return latest counter.

Let's call this async_func function using async-await and see how much time it takes for different range.

Sample 1

(async () => {
   console.time('async-await');
   for ( let i=0; i<n; i++ ) {
      await async_func();  
   }
   console.timeEnd('async-await');
})();

And time spend

    n     #    times
------------------------------------
   10     #    5.10s 
------------------------------------
   100    #    50.994s
------------------------------------
  1000    #    8:28.113 (m:ss.mmm)
------------------------------------

Sample 1's code run sequentially. This will be use for absolute sequence. Although there is another way (given below) which will work in the same manner without any async-await. As you can see, for 1000 call takes 8:28.113 (m:ss.mmm) which is way too much (this test run on local, it can be changed based on computer power).

Sample 2

(async () => {
  let finalResult = [];
  console.time('reduce-sync');
  await Array.from({ length: n }).reduce((promise, dt) => {
    return promise.then(
      () => 
        async_func()
          .then(result => finalResult.push(result))
      );
  }, Promise.resolve());
  console.timeEnd('reduce-sync');
})();

Sample 2's code also run sequentially and performance is almost same. What we are doing here?
array.reduce((promise, dt) => {}, Promise.resolve()), here accumulator is promise, so we can use promise.then(....)

Let's try to improve performance with sacrificing absolute sequential execution.

Sample 3

(async () => {
  console.time('reduce-semi-sequential');

  const oldData = Array.from({ length: n });
  const newData = [];
  while (oldData.length) newData.push(oldData.splice(0, 4));

  let finalResult = [];

  await newData.reduce((promise, currentList) => {
    return promise.then(() =>
      Promise.all(
        currentList.map((current) => async_func(),
        ),
      ).then((result) => {
        finalResult = [...finalResult, ...result];
        return Promise.resolve();
      }),
    );
  }, Promise.resolve());

  console.timeEnd('reduce-semi-sequential');
})();

And time spend

    n     #    times
------------------------------------
   10     #    1.527s 
------------------------------------
   100    #    12.757s
------------------------------------
  1000    #    2:07.140 (m:ss.mmm)
------------------------------------
  10000   #    21:10.670 (m:ss.mmm)
------------------------------------

as we can see, performance is much improved. Here first we are change 1-D
[1,2,3,4,5,6,7,8,9,10] array to 2-D array

[
   [1,2,3,4], // 0-group
   [5,6,7,8], // 1-index
   [9,10]     // 2-index

now every 0/1/2-group will run sequentially, inside each group will run in parallel.
It could be improve if we increase newData.push(oldData.splice(0, 4) total array size from 4 to higher. For example, by changing newData.push(oldData.splice(0, 4) to newData.push(oldData.splice(0, 10), I get following result

     n     #    times
------------------------------------
   1,000   #    5.126s
------------------------------------
  10,000   #    51.081s
------------------------------------
  100,000  #    8:29.471 (m:ss.mmm)
------------------------------------
1,000,000  #  1:26:01.277 (h:mm:ss.mmm)
------------------------------------

And what if we don't need sequential execution, let's try to run in parallel

(async () => {
    console.time('promise-parallel');
    await Promise.all(
    Array.from({ length: n}).map( (i) => async_func())
  );
    console.timeEnd('promise-parallel');
})();

and time execution

     n     #    times
------------------------------------
     10    #    502.277ms
------------------------------------
    100    #    504.385ms
------------------------------------
   1,000   #    514.173ms
------------------------------------
  10,000   #    547.021ms
------------------------------------
  100,000  #    3.649s
------------------------------------

as you see, run in parallel improve code performance a lot. But there is some issues also. For example, if array size is very high like 1M (depends of CPU), then we will get RangeError like following

RangeError: Too many elements passed to Promise.all
        at Function.allSettled (<anonymous>)
        .................
        .................

Create a Puzzle using JS & Canvas

Sabbir Hossain — Thu, 19 Aug 2021 17:32:30 +0000

github link: https://github.com/sabbir-hossain/cipher-text

Fake Local Server: A Mock server

Sabbir Hossain — Sat, 07 Aug 2021 12:25:10 +0000

Introduction

In software engineering world, we have to work with multiple teams and sometimes all teams might not be in same boat. For example, as a front-end or mobile app developer, your view is ready but backend server api is not created yet or returning error or not enough data. Or you are building a microservice that communicate with other microservice. But you are stuck because other part is not ready or throw error. It happens all the time for me.

Here all this issues are related to REST Api response. To solve this kind of issues I have create a git project called Fake Server Local.

How does it work?

Assume you have an e-commerce app and it's REST Api endpoint is https://api.awesome-ecommerce.com

Assume you get list of products by calling https://api.awesome-ecommerce.com/products/list and you are getting an object array that contains id and name.

[
    {id: 1, name: "phone"},
    {id: 2, name: "computer"}, 
    {id: 3, name: "books"}   
]

So your output schema is [{ id: 'number', name: 'text' }].

By using fake server local, you can create mock server that can send fake data based on your schema. All you need is a fake api http://fake-api-endpoint/products/list and schema [{ id: 'id', name: 'text' }] and you will get following fake response

[
    {id: 1, name: "lorem"},
    {id: 2, name: "ipsum"},
    {id: 3, name: "sit"},
]

Setup

Open Terminal
Clone git@github.com:sabbir-hossain/fake-server-local.git
Run cd fake-server-local && npm i
Run npm start
Now go to http://localhost:9920/dashboard. You should see the following image

Create fake api

Create a Project (it might be your server name). Now your api endpoint will be http://localhost:9920/${your-project-title} For example, create a project named (awesome-ecommerce) for your e-commerce project. So your api endpoint will be http://localhost:9920/awesome-ecommerce and you can replace your environment variable in your working project with this url.
select Route type from dropdown. Route type can be GET | POST | PUT | PATCH | DELETE. For example, Select GET
create route. Like your original route, create a route /product/list for product list and your endpoint will be http://localhost:9920/awesome-ecommerce/product/list
create returned schema. It has to be a JSON object. Object key will be expected to the output response's key and value will be output response's type. For example, your /product/list api, your schema might be [{ id: 'number', name: 'text' }]
There are no save/update button. Once you move your cursor, value will be updated
Now if you call http://localhost:9920/awesome-ecommerce/product/list api from your front-end/app/microservice, you should get following result

[
    {id: 1, name: "lorem"},
    {id: 2, name: "ipsum"},
    {id: 3, name: "sit"},
.............................
..............................
]

Your api might also have token. In that case, there is a checkbox called Authenticate, it will check if there are any auth value in header.

That's all. We can create as many projects and routes as we want. All data (projects/routes) is saved in local and it can be sharable. All response data is random text which is generated on api call.

Technologies used: Node.js, Koa.js, neDB, JS. It take zero external configuration. So it also works without internet

Any suggestion, tips, tricks will be highly appriciable

sabbir-hossain / fake-server-local

fake response of REST API

fake-server-local

What is fake-server-local?

fake server local is a local REST api server which return random lorem-ipsum data based on user schema. It might be helpful for Front-end/App developers, who don't have sufficient data (might be REST api is not ready or not enough data in database) to test their projects. All you need just create an api endpoint and output schema. You will get your sufficient data to test your project.

Technologies used

Node.js, Koa.js, neDB, JavaScript, HTML, CSS

Setup

Clone this project (must have node.js installed in your machine )
open project directory using terminal/Command Prompt
run npm install
run npm start
now go to http://localhost:9920/dashboard
create a project
your fake api endpoint will be http://localhost:9920/${your-project-title}

Creating Fake Api

Select Route type (GET|POST|PUT|PATCH|DELETE) and type your route name. Now your route will be http://localhost:9920/${your-project-title}/${your-route-name}

Now add output schema. Schema will be json object, which will…

View on GitHub