Lecture Notes on Promises, Axios, and Asynchronous Operations

Introduction

  • The lecture covers asynchronous operations, promises, and how to use Axios for making HTTP requests.
  • It includes practical examples and explanations of key concepts.

Asynchronous Operations and Promises

  • Asynchronous operations: Tasks that don't block the main thread, allowing other operations to continue.
  • Promises: Represent the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promise Object

  • Represents the eventual completion or failure of an asynchronous operation.
  • Contains the resulting value or an error.

Task Examples

  • Blue and orange tasks represent asynchronous operations.
  • Tasks can run more or less in parallel; however, JavaScript itself is single-threaded.

JavaScript is Single-Threaded

  • JavaScript cannot execute multiple tasks in parallel in the truest sense.
  • Tasks are processed one after another, but the order of completion isn't guaranteed.
  • You cannot predict the exact order in which asynchronous tasks will complete.

Promises Resolve Uncertainty

  • Promises provide a way to handle the completion of asynchronous tasks.
  • Allows reacting to the result, whether successful or failed.

Analogy: Birthday Cake

  • A promise is like someone promising to bake a cake in two weeks.
  • Two possibilities:
    • The promise is fulfilled, and you get a cake.
    • The promise is not fulfilled due to unforeseen circumstances.
  • The birthday party starts regardless, illustrating that asynchronous operations continue whether the promise is fulfilled or not.

Reacting to Promises

  • Promises allow reacting to different outcomes.
  • With Axios, you get a promise and can define actions for fulfillment (.then) or failure (.catch).
  • You don't know exactly when the task will complete, but you can specify what happens when it does.

Axios for HTTP Requests

  • Axios is used to make HTTP requests.
  • Need to tell Axios what URL to call.
  • Can send requests with data and configurations.

Axios Instances

  • Can create Axios instances with specific configurations using axios.create.
  • Allows setting a base URL.
  • Example: Setting a base URL for an image service.

Code Example

  • Creating a service file (e.g., imageService.ts) to manage API requests.
  • Using a base URL to construct API endpoints.
  • Getting images using Axios and displaying them.
    • URL: Returning random images
    • HTC Bild: Getting the HTC Bild

Practical Implementation with Gold

  • Use Axios in a P-Bike project.
  • Base URL is defined where the agent sits.
  • The link wasn't good before slash image, now it works.

Cat Image Service

  • Example using a Cat Image Service.
  • Creating an Axios instance for the API.
  • If CAT Image Service works, it uses the default Accessinstanz that is the API.

Constructing the URL

  • The base URL (Car Image) and the endpoint (/breed) are combined to create the full URL.

Handling Asynchronous Results

  • Since you don't know exactly when the request will complete, you wait for the result.
  • You can then extract the data.

Data Extraction

  • The content itself will be a data object when working with data.
  • If you do not want to extract everything, you can specify only the URL you want.

Using useEffect

  • Using useEffect with an empty dependency array.
  • The empty array is going to tell React that the effect is not dependent on any values from the component, meaning that the effect will only run once, after the initial render of the component.
  • This triggers the default Axios instance.

Async Function

  • The function used is asynchronous.
  • Since it’s asynchronous, you don’t know exactly when it will finish.
  • Use .then to specify what happens when the promise is fulfilled.

States and Rendering

  • Utilize useState to manage the image URL.
  • When the image URL is updated, it triggers a re-render of the component.

New Projects

  • The speaker recommends using a static service for new projects.