Promise
; 비동기 처리에 활용되는 객체
- 원할한 데이터 통신을 위해 활용 ; 서버에 데이터를 요청했을 때, 데이터를 모두 받아오기전에 웹에 출력하는 오류 방지
구조 ; new Promise((resolve, reject) => {}) ; 대기 상태인 Promise객체를 생성하며 콜백 함수 선언
then()을 활용해 결과 값을 받을 수 있음
호출 성공인 resolve와 then
function getData(){
return new Promise( (resolve, reject) => {
let data = 10;
resolve(data);
})
}
getData().then((resolvedData) => console.log(resolvedData));
호출 실패인 reject와 catch
function getData() {
return new Promise((resolve, reject) => {
reject(new Error("This is rejected!"));
});
}
getData().catch((err) => console.log(err));
Promise의 객체 연결
function increment() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1);
}, 2000);
})
.then((res) => {
console.log(res);
return ++res;
})
.then((res) => {
console.log(res);
return ++res;
});
}
increment();
function taskA(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 3000);
});
}
function taskB(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function taskC(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 2000);
});
}
taskA(5, 1) // taskA에 5,1를 인수로 집어 넣음
.then((a_res) => {
// 리턴값 a_res를 resolve함수의 인수인 res에 집어 넣음
console.log("A RESULT :", a_res);
return taskB(a_res);
})
.then((b_res) => {
// 위에서 나온 리턴값 taskB(a_res)인 b_res를 resolve함수의 res로 집어넣음
console.log("B RESULT : ", b_res);
return taskC(b_res);
})
.then((c_res) => {
console.log("C RESULT :", c_res);
});
Async & Await
; 비동기 처리를 할 때 사용하는 Promise의 단점을 보완하기 위해 ES7에서 추가된 키워드
- 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음
함수명 앞에 async를 붙히면 됨
async function() { return "id" }
async와 await를 활용한 함수
function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function helloAsync1() {
await delay(3000);
return "hello async";
}
async function main() {
const res = await helloAsync1();
console.log(res);
}
main();
- await이 붙은 함수는 동기적으로 처리함 ; 해당 함수가 실행되기 전까지 아래 함수를 실행하지 않음
- await은 async붙은 함수에서만 사용 가능
'WebProgramming > React' 카테고리의 다른 글
[React] useRef를 이용한 DOM조작 (0) | 2022.07.03 |
---|---|
[React] React 프로젝트 - DiaryEditor Component (0) | 2022.07.01 |
[React] Props (0) | 2022.07.01 |
[React] useState를 이요한 상태 관리 (0) | 2022.07.01 |
[React] 동기적 방식과 비동기적 방식, 콜백 함수 (0) | 2022.06.30 |
[React] React 공부법 (0) | 2022.06.28 |
[React] React 개발환경 구축하기 (0) | 2022.06.27 |
[React] React 사전 지식(React를 쓰는 이유) & 개발환경 체크 (0) | 2022.06.27 |
Promise
; 비동기 처리에 활용되는 객체
- 원할한 데이터 통신을 위해 활용 ; 서버에 데이터를 요청했을 때, 데이터를 모두 받아오기전에 웹에 출력하는 오류 방지
구조 ; new Promise((resolve, reject) => {}) ; 대기 상태인 Promise객체를 생성하며 콜백 함수 선언
then()을 활용해 결과 값을 받을 수 있음
호출 성공인 resolve와 then
function getData(){
return new Promise( (resolve, reject) => {
let data = 10;
resolve(data);
})
}
getData().then((resolvedData) => console.log(resolvedData));
호출 실패인 reject와 catch
function getData() {
return new Promise((resolve, reject) => {
reject(new Error("This is rejected!"));
});
}
getData().catch((err) => console.log(err));
Promise의 객체 연결
function increment() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1);
}, 2000);
})
.then((res) => {
console.log(res);
return ++res;
})
.then((res) => {
console.log(res);
return ++res;
});
}
increment();
function taskA(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 3000);
});
}
function taskB(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function taskC(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 2000);
});
}
taskA(5, 1) // taskA에 5,1를 인수로 집어 넣음
.then((a_res) => {
// 리턴값 a_res를 resolve함수의 인수인 res에 집어 넣음
console.log("A RESULT :", a_res);
return taskB(a_res);
})
.then((b_res) => {
// 위에서 나온 리턴값 taskB(a_res)인 b_res를 resolve함수의 res로 집어넣음
console.log("B RESULT : ", b_res);
return taskC(b_res);
})
.then((c_res) => {
console.log("C RESULT :", c_res);
});
Async & Await
; 비동기 처리를 할 때 사용하는 Promise의 단점을 보완하기 위해 ES7에서 추가된 키워드
- 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음
함수명 앞에 async를 붙히면 됨
async function() { return "id" }
async와 await를 활용한 함수
function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function helloAsync1() {
await delay(3000);
return "hello async";
}
async function main() {
const res = await helloAsync1();
console.log(res);
}
main();
- await이 붙은 함수는 동기적으로 처리함 ; 해당 함수가 실행되기 전까지 아래 함수를 실행하지 않음
- await은 async붙은 함수에서만 사용 가능
'WebProgramming > React' 카테고리의 다른 글
[React] useRef를 이용한 DOM조작 (0) | 2022.07.03 |
---|---|
[React] React 프로젝트 - DiaryEditor Component (0) | 2022.07.01 |
[React] Props (0) | 2022.07.01 |
[React] useState를 이요한 상태 관리 (0) | 2022.07.01 |
[React] 동기적 방식과 비동기적 방식, 콜백 함수 (0) | 2022.06.30 |
[React] React 공부법 (0) | 2022.06.28 |
[React] React 개발환경 구축하기 (0) | 2022.06.27 |
[React] React 사전 지식(React를 쓰는 이유) & 개발환경 체크 (0) | 2022.06.27 |