What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

After successfully obtaining the API Response Time (duration) using the 'makeAPICall' function, I am now faced with the task of passing this duration variable value to another asynchronous function. Can anyone assist me in finding a solution to achieve this?

const fetchAndMeasureDuration = ClientFunction(() => {
  console.time("timer1");
  const fetchData = () => fetch('https://xxxxxx',
    {method : 'GET',
      headers:{
        hash: 'xxxxx',
        id: 'xxxxxxxxc'
      }
    })
    .then(response => response.json())
    .then(data => {
      let duration = console.timeEnd("timer1");
      console.log(duration);
    });
  return fetchData();
});



test('test', async t => {
  await fetchAndMeasureDuration();
  console.log(duration)?????
});

Answer №1

Issue number one: console.timeEnd does not have a return value; it simply prints the elapsed time to the console. It is recommended to use performance.now() or just Date instead.

Further, you should return the duration from the last then block in your code snippet.

const makeApiCall = ClientFunction(() => {
  const start = new Date().getTime();
  const testLocation = () => fetch('https://xxxxxx',
    {method : 'GET',
      headers:{
        hash: 'xxxxx',
        id: 'xxxxxxxxc'
      }
    })
    .then(response => response.json())
    .then(data => {
       const end = new Date().getTime();
       return end - start;
    });
  return testLocation();  // This returns a Promise<number>
});



test('test', async t => {
  const duration = await makeApiCall();
  console.log(duration)?????
});

Answer №2

If you want to test APIs using TestCafe, consider using the t.request method for a structured approach.

fixture `API Testing`;

test('Basic API Test', async t => {
    const startTime = Date.now();

    const response = await t.request('https://jsonplaceholder.typicode.com/comments');
    const duration = Date.now() - startTime;

    console.log(`Request took ${duration}ms to complete`); // Request took 336ms to complete
    await t.expect(response.status).eql(200);
});

Keep in mind that the actual execution time of a request may vary due to factors like the processing of the TestCafe command and messaging overheads. Use this timing as an estimate rather than an exact measure of performance. Additionally, refer to the timeout option for more control over request timeouts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pull information from database based on selection made in combo box

I am attempting to populate a text box with values from a database based on the selection in a combo box. I have written the code below but it doesn't seem to be working correctly. The issue is that the value selected in the combo box is not being pas ...

Harnessing the Power of Google Tag Script in Next.js

After researching How to load Google Tag Manager with the next/script component (Next.js 11) and reviewing this documentation page, my issue remains unresolved. I am looking to implement Google Tag on multiple websites developed using nextjs, so I created ...

Comparing functions and function issues when using onClick in JavaScript

I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...

Troubleshooting: Why isn't setMetadata working in NestJS from authGuards

When I call my decorators, I want to set metadata for logging purposes. Within my controller, the following decorators are used: @Post("somePath") @Permission("somePermission") @UseGuards(JwtAuthGuard) @HttpCode(200) @Grafana( ...

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

Error VM5601:2 encountered - Unexpected token "<" found in JSON at position 10

I am trying to retrieve data using Ajax and jQuery, but I keep encountering an error that I cannot figure out how to fix. VM5601:2 Uncaught SyntaxError: Unexpected token < in JSON at position 10 Below is the code I am working with. Model public f ...

Configuring a timeout for your Next.JS API can help optimize the performance

Due to restrictions on another API, my own API takes 10 minutes to return a result. When running locally, I am able to wait and successfully receive the data after 10 minutes. However, when deployed on Vercel, I encounter a timeout error (status code 504). ...

When utilizing await/async in TypeScript with Axios, the return type may be incorrect

UPDATE: After some investigation, it turns out the issue was not related to Axios or TypeScript but rather a strange IDE configuration problem. Starting fresh by recreating the environment and .idea folder solved the issue. While working with Axios in Typ ...

IntelliJ IDEA does not support the recognition of HTML tags and directives

I seem to have lost the ability to switch between my HTML and TS files in Intellij IDEA; the tags, directives, and autocompletion in HTML are no longer working. Additionally, I'm receiving some warnings: https://i.stack.imgur.com/QjmNk.png Is there ...

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

Divide a string within a JSON object and output it as an array

I've encountered a challenge while working with data received from an API. My goal is to loop through this information and generate HTML elements based on it. The issue lies in the 'subjects' data, which arrives as a string but needs to be m ...

Ways to attach an event listener to a useRef hook within a useEffect hook

As I work on creating a custom hook, I am faced with the task of adding an event listener to a ref. However, I am uncertain about how to properly handle cleaning up the event listener since both listRef and listRef.current may potentially be null: const ...

Creating an object key using a passed literal argument in TypeScript

Can the following scenario be achieved? Given an argument, how can we identify the object key and access it? Any potential solutions? async function checkKey(arg:'key1'|'key2'){ // fetchResult returns an object with either {key1:&apo ...

What is the best way to filter specific data types when using ngFor in Angular?

As I loop through the array named "fruits," which contains objects of type "FruitService" that I created, I want to display each element. However, when I delete them (I know it's strange, no database involved), they turn into type "undefined" and star ...

Unknown and void

undefined === null => false undefined == null => true I pondered the logic behind undefined == null and realized only one scenario: if(document.getElementById() == null) .... Are there any other reasons why (undefined === null) ...

Curious about the missing dependencies in React Hook useEffect?

I'm encountering the following issue: Line 25:7: React Hook useEffect has missing dependencies: 'getSingleProductData', 'isProductOnSale', and 'productData'. Either include them or remove the dependency array react-hoo ...

Utilizing jQuery for cloning elements

I need to add functionality for adding and deleting rows in multiple tables on my website. Currently, I am doing this by directly inserting HTML code using jQuery, but it has become inefficient due to the number of tables I have. I am considering creating ...

Attempting to toggle variable to true upon click, but encountering unexpected behavior

On my webpage, I have implemented a simple tab system that is only displayed when the variable disable_function is set to false. However, I am facing an issue with setting disable_function to true at the end of the page using a trigger. When this trigger ...

There seems to be a display issue with the DataTables tables

Utilizing Bootstrap 4, I followed the example provided by DataTables on their website: link. The specific code that was implemented can be found here: link Take a look at how it appears: http://pastebin.com/HxSNUnLq Any suggestions on how to resolve th ...

The AJAX request to the URL is failing

Creating a webpage with the ability to control an IP camera's movements such as moving up and down or zooming in and out involves calling specific URLs. While trying to implement this feature asynchronously, I encountered issues using AJAX which did n ...