모두 하나로! 자바스크립트 약속…

괜찮아! 그럼 시작하기 전에 서로 약속합시다 😅
My Promise: Javascript Promise를 가능한 최선의 방법으로 설명하도록 노력하겠습니다!
귀하의 약속: 전체 블로그를 읽으십시오! 😃

지금은 두 약속 모두 보류 상태이므로 이행하도록 노력합시다 🙈

좋습니다. 비동기 JS에 대한 간단한 소개부터 시작하겠습니다...
약속은 결국 가치를 창출하는 방법입니다. getter 함수의 비동기 대응물로 간주할 수 있습니다. 그 본질은 다음과 같이 설명할 수 있습니다.

promise.then(function(value) {
  // Do something with the 'value'
});

우리는 Javascript가 단일 스레드이며 단일 기본 스레드에서 한 번에 한 가지만 발생할 수 있으며 다른 모든 작업은 작업이 완료될 때까지 차단된다는 것을 알고 있습니다. 따라서 네트워크나 데이터베이스에서 데이터를 가져오려는 경우 기본 스레드가 차단되고 완료하는 데 걸리는 시간을 알 수 없다고 가정합니다.
따라서 이 문제를 해결하기 위해 비동기 코드 스타일의 두 가지 주요 유형이 있습니다.

구식 콜백

최신 약속 스타일 코드

하나하나 알아보겠습니다!

let promise = new Promise(function(resolve, reject){
   // executor (the producing code, "singer") 
});

새 Promise에 전달되는 함수를 실행자라고 합니다. 새 Promise가 생성되면 Executor가 자동으로 실행됩니다. 결과를 생성해야 하는 생성 코드가 포함되어 있습니다.

인수 resolve 및 reject는 JavaScript 자체에서 제공하는 콜백입니다. 우리 코드는 실행기 내부에만 있습니다. Executor가 결과를 얻으면 빠르든 늦든 상관없이 다음 콜백 중 하나를 호출해야 합니다.

resolve(value) — 작업이 성공적으로 완료된 경우 결과 값과 함께.

**reject(error) — **오류가 발생한 경우 오류는 오류 개체입니다.

약속 체이닝

각각 이전 작업 결과가 필요한 두 개 이상의 비동기 작업을 연속적으로 실행하려는 경우 연결이 필요합니다!

chooseProduct()
.**then**(up => selectProduct(up))
.**then**(cart=> addToCart(cart))
.**then**(buy=> buyProduct(buy))
.**catch**(failureCallback);

Promise Chaining을 피하고 깨끗한 코드를 작성하기 위해 async & await가 있습니다. **Async Await **는 Promise 위에 구문 설탕 역할을 하여 비동기 코드를 더 쉽게 작성하고 읽을 수 있도록 합니다!

const readData = **async**() => {
 try{
     const response = **await **fetch(URL);
     console.log(response);
  }
 catch(err){
    console.log(err);
  }
}

javascript에는 몇 가지 정적 약속 방법이 있습니다.

**Promise.all(iterable) **

**Promise.race(iterable) **

**Promise.reject(reason) **

**Promise.resolve(value) **

Promise.all()

Promise.all() 메서드는 Promise의 Iterable을 입력으로 사용하고 입력 Promise의 결과 배열로 해석되는 단일 Promise를 반환합니다. 입력 약속이 거부되면 즉시 거부합니다.

p1 = Promise.resolve(50);
p2 = 200
p3 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 100, 'geek');
});

Promise.all([p1, p2, p3]).then(function(values) {
    document.write(values);
});

Promise.race()

Promise.race() 정적 메서드는 Promise 목록을 반복 가능한 객체로 받아들이고 이행하거나 거부하는 Promise가 하나라도 있는 즉시 해당 Promise의 값이나 이유와 함께 이행하거나 거부하는 새로운 Promise를 반환합니다.

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
    }, 1 * 1000);

});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The second promise has resolved');
        resolve(20);
    }, 2 * 1000);
});

Promise.race([p1, p2])
    .then(value => console.log(`Resolved: ${value}`))
    .catch(reason => console.log(`Rejected: ${reason}`));

**//OUTPUT
**The first promise has resolved 
Resolved: 10 
The second promise has resolved

다음 예에서는 두 가지 약속을 만듭니다. 첫 번째 약속은 1초 안에 해결되고 두 번째 약속은 2초 안에 거부됩니다. 첫 번째 약속이 두 번째 약속보다 빠르기 때문에 반환된 약속은 첫 번째 약속의 값으로 해석됩니다.

javascript에는 몇 가지 인스턴스 약속 방법이 있습니다.

**Promise.prototype.then() **

**Promise.prototype.catch() **

**Promise.prototype.finally() **

드디어 목적지에 도착했습니다. 당신이 여기 있기 때문에 당신은 당신의 약속을 지켰고 저도 제 약속을 지킬 수 있었으면 좋겠습니다.

새로운 것을 즐기고 배웠기를 바랍니다! 안녕👋

Bhavy Kapadia(프로그래머 분석가)