The process of coordination and the ability to observe changes

Question

The process of coordination and the ability to observe changes

Currently, I have a Typescript function that is responsible for converting a list of elements into a Map object.

During this conversion process, there is a need to make some modifications in the Map before it is returned. To do so, I must make an http.GET request/subscription to a server to fetch the required value.

The challenge arises when I attempt to use the value immediately after making the GET request, as the server response is still pending. This results in the Map being returned with an incorrect value, which creates issues later on when using this map with the incorrect data.

I am seeking a way to synchronize my function with the result of the GET request before proceeding to process the Map further down the code (after returning the function).

I have heard suggestions about using Observables as a potential solution but am unsure about how to implement this approach.

Any assistance or guidance would be greatly appreciated!

Warm regards, Charles.

javascript typescript observable synchronized

Answer 1

Answer №1

Is there a way to achieve this task using Observables? I've heard it could be the solution, but I'm not sure how to implement it.

When dealing with asynchronous tasks, you'll need a mechanism for handling continuations. Some popular options include:

Callbacks

Natively supported, for example, setTimeout relies on callbacks

// Some code 

setTimeout(() => {
  // Code that runs after 1 second
}, 1000)

Promises

Now supported natively. You can find more information about Promises in TypeScript here: https://basarat.gitbooks.io/typescript/docs/promise.html

Observables

If your framework's http module returns observables, then you should utilize them.

Summary

You cannot pause the entire JavaScript execution as its context is single-threaded. Instead, you have to work with continuations. Look at the documentation of the library (e.g. angular/axios) or the native APIs you are working with (fetch/XHR) for more guidance.

Answer 2

Is there a way to achieve this task using Observables? I've heard it could be the solution, but I'm not sure how to implement it.

When dealing with asynchronous tasks, you'll need a mechanism for handling continuations. Some popular options include:

Callbacks

Natively supported, for example, setTimeout relies on callbacks

// Some code 

setTimeout(() => {
  // Code that runs after 1 second
}, 1000)

Promises

Now supported natively. You can find more information about Promises in TypeScript here: https://basarat.gitbooks.io/typescript/docs/promise.html

Observables

If your framework's http module returns observables, then you should utilize them.

Summary

You cannot pause the entire JavaScript execution as its context is single-threaded. Instead, you have to work with continuations. Look at the documentation of the library (e.g. angular/axios) or the native APIs you are working with (fetch/XHR) for more guidance.

The process of coordination and the ability to observe changes

Answer №1

Callbacks

Promises

Observables

Summary

Similar questions

Having trouble with syntax when using THREE.TextureLoader?

error encountered in NestJS: unable to modify headers once they have been sent

The AJAX request cannot be sent until the previous request has completed

"The communication between systems failed" - specifically for Internet Explorer

Turn off auto-suggestion feature on the iPad and iPhone keyboard using JavaScript

The ManyToOne relation in TypeGraphQL may result in a null value being returned

What's causing the error message "button.addEventListener is not a defined function" to appear on my screen?

Rendering based on conditions with a pair of values

The JavaScript alert box cannot retrieve data from the PHP parent page

What is the process for creating a unit test case for an Angular service page?

Linking a jquery modal popup script to a button click event

Unpacking Constructor with visible arguments

Changing the button class during an event in Angular 4

Using axios to pass FormData as a parameter in a post request

Listener for Select Lists in PHP and Javascript

Tips for implementing nested module styles in Ant Design - A step-by-step guide

Restrict Textfield input to only accept Integers and Floats

.addClass successfully adding classes to certain elements while encountering issues with others

Is there a way to effectively transfer both Vertex and Face normals to a Three.js shader?

JavaScript counter unexpectedly resetting to zero instead of the specified value