비동기 JS 이해

Async JS의 목표: 백그라운드에서 실행되는 장기 실행 작업을 처리하는 것

• 사용 사례: AJAX 호출을 통해 원격 서버에서 데이터를 가져옵니다.
• 예. img 소스 설정, 타이머, 약속, Fetch API, Async-Await, Geolocation API, 오류 처리.

동기화 코드:

• 실행 컨텍스트의 일부인 실행 스레드에 의해 작성된 순서대로 한 줄씩 실행됩니다.
• Dis: AJAX 호출, D/B 액세스, 경고 창 등과 같이 코드 한 줄을 실행하는 데 시간이 오래 걸려 완료될 때까지 코드 실행을 차단하는 경우.

비동기 코드

• 타이머는 코드를 차단하지 않고 백그라운드에서 실행됩니다. 즉, 실행의 기본 스레드를 차단하지 않습니다.
• 비동기 코드는 백그라운드에서 실행되는 작업이 완료된 후 실행됩니다.
• 실행은 비동기 작업이 작업을 완료할 때까지 기다리지 않습니다.
• 비동기 - 동시에 발생하지 않습니다.
• 콜백은 코드를 자동으로 비동기화하지 않습니다. 전. 배열 맵 메소드는 콜백을 수용하지만 코드를 비동기화하지는 않습니다. 타이머와 같은 특정 기능만 비동기 방식으로 작동하지만 모든 콜백이 작동하는 것은 아닙니다.

const p = document.querySelector('.p');
setTimeout(function(){
  p.textContent = "Welcome to JS";
}, 3000); // C/b executes after duration.
p.style.color = 'red';

Ex. Setting source of an img is an async operation, while rest of the code is running. Once the image is loaded completely, a load event will be emitted by JS for which we can listen.

const img = document.querySelector('.cat');
img.src = 'cat.jpg'
img.addEventListener('load',function(){
  img.classList('fadeIn');
});
p.style.width = '300px';

• 이벤트 리스너만으로는 코드를 비동기화할 수 없습니다. 예를 들어 버튼 클릭 리스너는 백그라운드에서 어떤 작업도 수행하지 않습니다. 따라서 비동기 동작이 포함되지 않습니다.

아약스

• 비동기 방식으로 원격 웹 서버와 통신할 수 있습니다.
• AJAX 호출을 사용하여 웹 서버에서 동적으로 데이터를 요청합니다.

API

• 다른 소프트웨어가 사용하는 소프트웨어로 앱간 통신이 가능합니다.
• 예. DOM API, Geoloaction API 등은 모두 소프트웨어가 상호 작용할 수 있는 자체 포함된 소프트웨어입니다.
• 클래스를 사용하고 일부 메소드를 공개함으로써 API를 구현할 수 있습니다.
• 온라인 API: 서버에서 실행되는 애플리케이션으로, 데이터 요청을 받고 응답으로 데이터를 다시 보냅니다.
• API는 백엔드 개발을 사용하여 구축되거나 다른 개발자가 무료로 제공하는 타사 API를 사용합니다.
• 예. 거의 모든 것에 대한 샘플 API가 있습니다.
• 이전에는 XML을 사용했지만 이제는 문자열로 변환된 JS 객체인 JSON만 사용합니다.

# First API Call: Older way of doing AJAX using XHR. Modern way uses fetch API.
- CORS need to be Yes/Unknown to access 3rd party APIs from our code.
- AJAX call is done in the background, while the rest of the code keeps running which makes it non-blocking.
- Hence, register a callback for the load event on request object.
- Request is sent in the background, when its complete 'load' event will be fired. As soon data arrives, Callback fn will be called.

HTML:
<main class="container">
  <div class="countries">
</div>
</main>

JS:
const getCountryData = function(country){
const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

// 1. request created
const request = new XMLHttpRequest(); 
// 2.request opened
request.open("GET", `https://restcountries.com/v3.1/name/${country}`); 
// 3. request sent
request.send();

// 4. When data arrives, load event will be fired & below C/b will be invoked.
// 5. response arrives in the property responseText of request object in JSON i.e big string of text will be received from AJAX call which needs to be converted to JS object.
// 6. Convert JSON to JS.
request.addEventListener("load", function () {
  // console.log(this);    this refers to request object here. 'this' can be replaced with request object.
  // console.log(this.responseText);  will only be set when data has arrived.

  // Both lines yield same result below.
  //const [ data ] = JSON.parse(this.responseText);
  const data = JSON.parse(this.responseText)[0];
  console.log(data);

  const html = `<article class="country">
  <img src=${data.flags.svg} alt="" class="country__img">
  <div class="country__data">
    <h3 class="country__name">${data.name.common}</h3>
    <h4 class="country__region">${data.region}</h4>
    <p class="country__row"><span>${(+data.population / 1000000).toFixed(1)}</span> mn</p>
    <p class="country__row"><span>${data.languages[Object.keys(data.languages)[0]]}</span></p>
    <p class="country__row"><span>${data.currencies[Object.keys(data.currencies)[0]].name}</span></p>
  </div>
</article>`;
  countriesContainer.insertAdjacentHTML('beforeend', html);
  countriesContainer.style.opacity = 1;
});
};

// All AJAX calls are happening in parallel
getCountryData('usa');
getCountryData('russia');
getCountryData('germany');
getCountryData('brazil');
getCountryData('india');

콜백 지옥:

• AJAX 요청을 연결하면 순서대로 작동합니다. 즉, 첫 번째 요청이 완료된 후 두 번째 요청이 생성됩니다.

- 순서대로 이루어져야 하는 중첩된 AJAX 호출에 대해 정의된 중첩된 콜백으로 인해 발생합니다.

// This below triangular shape denotes callback hell. Makes code hard to maintain.
// GPP: Code which is hard to understand is bad code, hence difficult to add features
// Promises help us to resolve this Callback Hell problem.

setTimeout(() => {
  console.log("1 sec passed");
  setTimeout(() => {
    console.log("2 sec passed");
    setTimeout(() => {
      console.log("3 sec passed");
      setTimeout(() => {
        console.log("4 sec passed");
        setTimeout(() => {
          console.log("5 sec passed");
          }, 1000);
        }, 1000);
      }, 1000);
    }, 1000); 
}, 1000);



// Get the neighbouring countries
const renderCountry = function (data) {
  const btn = document.querySelector(".btn-country");
  const countriesContainer = document.querySelector(".countries");

  const html = `<article class="country">
  <img src=${data.flags.svg} alt="" class="country__img">
  <div class="country__data">
    <h3 class="country__name">${data.name.common}</h3>
    <h4 class="country__region">${data.region}</h4>
    <p class="country__row"><span>${(+data.population / 1000000).toFixed(
      1
    )}</span> mn</p>
    <p class="country__row"><span>${
      data.languages[Object.keys(data.languages)[0]]
    }</span></p>
    <p class="country__row"><span>${
      data.currencies[Object.keys(data.currencies)[0]].name
    }</span></p>
  </div>
</article>`;
  countriesContainer.insertAdjacentHTML("beforeend", html);
  countriesContainer.style.opacity = 1;
};

const getNeighbours = function (country) {
  const request = new XMLHttpRequest();
  request.open("GET", `https://restcountries.com/v3.1/name/${country}`);
  request.send();

  request.addEventListener("load", function () {
    const [data] = JSON.parse(this.responseText);
    console.log(data);
    renderCountry(data);

    const [neightbour] = data.borders;
    if(!neightbour) return;

    // request2 is Dependent on request1 as its invoke after request1. request2 will its own event listener.
    const request2 = new XMLHttpRequest();
    request2.open("GET", `https://restcountries.com/v3.1/alpha/${data.borders}`);
    request2.send();

    request2.addEventListener("load", function () {
    const [data2] = JSON.parse(this.responseText);
    console.log(data2);
    renderCountry(data2);
  });
};

getNeighbours("italy");

위 내용은 비동기 JS 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!