Consecutive Vows in TypeScript

My TypeScript class has a save method that I want to only let the next call happen once the first one is completed. Consider this scenario:

  count = 0;
  async save() {
      let x = this.count++;
      console.log("start " + x);
      await axios.post("***", {});
      console.log("end " + x);
  }
}

In this situation, if the user calls save without awaiting it, the second post can be made before the first one completes, leading to potential issues.

The solution I have come up with is:

  lastSave = Promise.resolve();
  count = 0;
  async save() {
    this.lastSave = this.lastSave.then(async () => {
      let x = this.count++;
      console.log("start " + x);
      await axios.post("***", {});
      console.log("end " + x);
    });
  }

Is this approach valid, or is there a better way to achieve the desired outcome?

Answer №1

This particular approach of chaining promises using then is completely valid. The main concern with your current implementation lies in the error handling. If even one request fails, it will cause all subsequent requests to fail as well.

A more robust solution could involve:

  lastSave = Promise.resolve();
  count = 0;
  async save() {
    const savePromise = this.lastSave.then(async () => {
      let x = this.count++;
      console.log("start " + x);
      await axios.post("***",{});
      console.log("end " + x);
    });
    // Handle errors gracefully without halting execution
    this.lastSave = savePromise.then(() => {}).catch(() => {});
    // Remember to return the promise so that callers can react accordingly
    return await savePromise; 
  }

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

Tips for reducing redundant API requests while using NgRx

I'm facing an issue with my application that has 2 menu items; Teams and Players. Every time I switch between them, an unnecessary API call is made even though the data is already stored. Here is the effects file: loadTeams$ = createEffect(() => { ...

Why is it that TypeScript struggles to maintain accurate type information within array functions such as map or find?

Within the if block in this scenario, the p property obtains the type of an object. However, inside the arrow function, it can be either an object or undefined. const o: { p?: { sp?: string } } = { p: {} } if (o.p) { const b = ['a'].map(x => ...

Issue: Map container not located when implementing a leaflet map with Angular

Here is the complete error message: core.js:6479 ERROR Error: Map container not found. at NewClass._initContainer (leaflet-src.js:4066) at NewClass.initialize (leaflet-src.js:3099) at new NewClass (leaflet-src.js:296) at Object.createMap [a ...

Tips for adding a "Select All" feature to a dropdown list?

Currently, I have a dropdown list with a filter for IN and OUT values. The functionality is working as expected: <select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeT ...

What is the most effective way to use a withLatestFrom within an effect when integrating a selector with props (MemoizedSelectorWithProps) sourced from the action?

I am struggling to utilize a selector with props (of type MemoizedSelectorWithProps) in an effect inside WithLatestFrom. The issue arises because the parameter for the selector (the props) is derived from the action payload, making it difficult for withLat ...

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

filter failing to provide output

Issue with fetching partnername from the filter function, always returning undefined. administrationList = [ { "runid": 6, "partnerid": 2, "partnername": "test admin2", }, { "runid& ...

EventEmitter asynchronous callback

Can you attach an asynchronous callback to an EventEmitter in TypeScript or JavaScript? someEmitter.on("anEvent", async () => console.log("hello")); If so, does using an async function guarantee that the function will run asynchronously? Also, what ar ...

Displaying notification in Ionic 2

Whenever I click on the register button, if I fill out all the fields I am taken to the regsuccess page. Otherwise, I receive a message saying to fill in all required fields. However, I want to display an alert message using Ionic2 and TypeScript. HTML: ...

Angular 2: Integrating a service into a class

I am working on an Angular class that represents a shape. My goal is to be able to create multiple instances of this class using a constructor. The constructor requires several arguments that define the properties of the shape. constructor(public center: ...

Layers has a compilation error, but it runs fine at runtime

Even though the code works fine at runtime, I encounter an error during compile time which hinders the production build process, making it necessary to ignore errors, a practice I prefer to avoid. The issue arises when trying to cast to a marker object th ...

Leverage the power of the MEAN stack with Angular 2 to seamlessly retrieve data from multiple APIs

Using angular2, nodejs, expressjs, and mongodb for development. I need all APIs to fetch data and display it on an HTML page. Below is the code snippet from my .ts file. view image description here All APIs have been tested and are s ...

"Utilizing Ionic 3 for navigating internal links within a website using the tag

Hello everyone, I recently started exploring Ionic and Angular and I have a question regarding internal links in the Ionic framework. To begin my learning journey, I decided to work with the pre-made project called Ionic sidemenu. I am attempting to create ...

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

Tips for importing a .ts file into another .ts file within an Angular 5 application

I have a bunch of utility methods stored in a file called utils.ts that I want to reuse across multiple components. I'm not sure if it's even possible, and if it is, where should I place the import statement and what would be the correct syntax. ...

Championing React, TypeScript, and TSLint: A Pose of Cur

In my React and TypeScript project, I am utilizing react router dom to dynamically load components from the backend. However, when I import components like "ListData", they are considered unused and removed when I save. How can I keep these components fr ...

Guide to iterating through a Cheerio element within an asynchronous function and updating an external variable

To develop an API that scrapes GitHub repositories for specific data, including file name, extension, size, and number of lines, I have decided to utilize Node with TypeScript. In order to streamline this process, I have created an interface called FileInt ...

Invalid characters have been found in literals within the transpiled JavaScript output

In my TypeScript code, I have a field definition that is structured like this: languages: Array<{}> = [{ key: "fr", name: "français" }]; However, when the TypeScript file is compiled into JavaScript, the output ends up looking like this: this.lan ...

Angular2 Animation for basic hover effect, no need for any state change

Can anyone assist me with ng2 animate? I am looking to create a simple hover effect based on the code snippet below: @Component({ selector: 'category', template : require('./category.component.html'), styleUrls: ['./ca ...

I'm wondering why Jest is taking 10 seconds to run just two simple TypeScript tests. How can I figure out the cause of this sluggish performance?

I've been experimenting with Jest to execute some TypeScript tests, but I've noticed that it's running quite slow. It takes around 10 seconds to complete the following tests: import "jest" test("good", () => { expec ...