🤙Promise

https://programmingsummaries.tistory.com/325
이미지 썸네일 삭제

[JavaScript] 바보들을 위한 Promise 강의 - 도대체 Promise는 어떻게 쓰는거야?
들어가며 JavaScript의 세계에서는 거의 대부분의 작업들이 비동기로 이루어진다. 어떤 작업을 요청하면서 콜백 함수를 등록하면, 작업이 수행되고 나서 결과를 나중에 콜백 함수를 통해 알려주는 식이다. 실제 비..
programmingsummaries.tistory.com

Promiss/ async-awiat 문법도 중요하지만, 비동기방식 자체를 잘 이해해보자

const amIsexy = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, “Yes you are”);
});

console.log(amIsexy);

setInterval(console.log, 1000, amIsexy);

이러면 3초있다가부터는 값이 출력된다. 기본 원리 이해.

const amIsexy = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, “Yes you are”); // resolve(“Yes you are”);
}); // 비동기로 할일 하고 Resolve()나 Reject() 호출

amIsexy.then((value) => console.log(value));

const thenFn = (value2) => console.log(value2);

amIsexy.then(thenFn);

const errIsexy = new Promise((resolve, reject) => {
setTimeout(reject, 3000, “you are ugly”);
});

errIsexy.catch((value3) => console.log(value3));

errIsexy
.then((result) => console.log(result))
.catch((error) => console.log(error));

resolve 호출시 then부분 실행
reject 호출시 catch 부분 실행
then이후 catch가 실행되는게 아니라는거 주의

const amIsexy = new Promise((resolve, reject) => {
resolve(2);
});

amIsexy
.then((number) => {
console.log(number);
return number;
})
.then((othernumber) => {
console.log(othernumber * 2);
});

const amIdouble = new Promise((resolve, reject) => {
resolve(2);
});

const timesTwo = (numbertwo) => numbertwo * 2;

amIdouble
.then(timesTwo)
.then(timesTwo)
.then(timesTwo)
.then(timesTwo)
.then(() => {
throw Error(“something is wrong”);
})
.then((lastNumber) => console.log(lastNumber))
.catch((error) => console.log(error));

promise의 promise 반복하는것을 체이닝이라고 하고, 유즈케이스는

1. 데이터를 읽어와서 2. 그걸 복호화하고 뭐 이런거

const p1 = new Promise((resolve) => {
setTimeout(resolve, 3000, “First”);
});

const p2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, “second”);
});

const p3 = new Promise((resolve) => {
setTimeout(resolve, 1000, “third”);
});

const motherPromise = Promise.all([p1, p2, p3]);

motherPromise
.then((value) => console.log(value))
.catch((err) => console.log(err)); // p1, p2, p3중하나라도 리젝되면 여기로

여러 promise가 순차적으로 실행되어야할 경우도 있을것이다.
이럴때 Then으로 계속 연결하는것보다 Promise.all을 사용해보자

all안의 promise들은 끝난순서대로가 아니라 all에서 등록된 순서대로 결과가 출력된다(배열로)
또한 하나라도 Reject되면 전체가 Reject된다. 다른 프로미스도 다 리젝된다.

const motherPromise = Promise.race([p1, p2, p3]); // 위 예제에서 all이 race로 바뀜

motherPromise
.then((value) => console.log(value))
.catch((err) => console.log(err)); // p1, p2, p3중하나라도 리젝되면 여기로

말그대로 레이스이다. 배열안 프로미스 중 가장 빨리 끝나는 reject이나 resolve 하나만 결과를 출력한다.
위 예제의 경우 p3가 1초로 가장 빠르므로 p3만 뜰것이다.￦

const p1 = new Promise((resolve, reject) => {
setTimeout(reject, 1000, “First”);
})
.then((value) => console.log(value))
.catch((e) => console.log(${e}error))
.finally(() => console.log(“Im done”));

try catch처럼 빠이널리 하는일

fetch(“http://127.0.0.1:5500/index.html”)
.then((response) => response.text())
// .then((potato) => console.log(potato))
.catch((e) => console.log(✔${e}));

fetch(“https://yts.mx/api/v2/list_movies.json”)
.then((response) => {
//console.log(response);
return response.json();
})
.then((potato) => console.log(potato))
.catch((e) => console.log(✔${e}));

실제 사용례

http://junil-hwang.com/blog/javascript-promise-async-await/
이미지 썸네일 삭제

[javascript] Promise, async, await - 개발자 황준일
javascript는 event driven 으로 작동되며 이에 따라 비동기 프로그래밍 해야합니다. 즉, 이벤트가 끝난 후에 코드가 실행 되는 방식입니다. 이 때 많은 사람들이 callback 지옥을 직면하게 되며, promise를 통해 해결할 수 있습니다.
junil-hwang.com

요것도 봐보자 필요하면 정리