728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
// promise : 비동기 처리를 위해 ES6부터 지원되는 비동기 함수
// promise 생성자 함수는 비동기 처리를 수행할 콜백 함수(executor 함수)를 인수로 전달받음
// executor는 resolve, reject라는 두 개의 함수르 인수로 전달받음
// promise는 생성되는 순간 바로 executor 를 실행함(중요!)
// promise는 실행이 끝난 promise 객체를 반환함
// Promis 상태 -
// 1) prnding : 비동기 처리가 아직 수행되징 않은 상태로, 프로미스 생성 직후 상태
// 2) fulfiled : 비동기 처리가 수행된 상태(성공)로, resolve가 호출된 상태
// 3) rejected : 비동기 처리가 수행된 상태(실패)로 , reject가 호출도니 상태
// 생성자. producer - promise를 생성하는 쪽
// const promise = new Promise((resolve, reject) =>{
// if(true){// 비동기 처리가 성공했을 시
// resolve('result');
// }
// else {// 비동기 처리 실패 시
// reject('failure reason')
// }
// });
// Consumer 소비자, Promise 객체(의 내부 함수)를 소비하는 쪽
// Promise의 후속처리 메서드
// 1) then
// - 두 개의 콜백 함수를 인수로 전달받음
// - Promise가 fulfiled된 상태 (resolve 호출) Promise의 처리 결과를 인수로 받음
// - Promise가 rejected된 상태 (reject 호출) Promise 의 에러를 인수로 받음
// const successedPromise = new Promise ((resolve, reject)=>{
// resolve('성공했다');
// });
// const faliededPromise = new Promise ((resolve, reject)=>{
// reject('실패했다');
// });
// faliededPromise.then(
// value => { console.log('val: ', value);},
// e => { console.log('e: ', e);}
// );
// // 2) catch
// // - 한 개의 콜백 함수를 인수로 전달받음
// // - Promise가 rejected 된 상태의 경우만 호출되며, Promise의 에러를 인수로 받음
// // - then과 동일하게 동작함
// //
// new Promise((res, rej)=> rej(new Error('실패되었음')))
// .catch((e)=> { console.log(e);
// });
// // 3) finally
// // - 한 개의 콜백 함수를 인수로 전달받음
// // - Promise성공 실패 상관없이 호출됨
// new Promise((resolve, reject) => {
// // resolve('성공입니다.!');
// reject('실패입니다.!');
// }).finally(() => {
// console.log('마지막입니다.');
// });
// // Promise를 사용한 예외처리
// let errorPromise = new Promise((resolve, reject) =>{
// setTimeout(()=>{
// try{
// throw new Error('에러났다!!!!!!!!');
// resolve();
// }catch(e){
// reject(e);
// }
// },3000)
// });
// errorPromise.then(
// value => {},
// error => {
// console.log('에러가 나버렸다');
// console.log('에러: ', error)
// }
// );
// let testPromise = new Promise((resolve, reject) =>{
// setTimeout(()=>{resolve(f1)},1000)
// });
// testPromise.then(
// value => {value()},
// error => {}
// ).then(
// value => {f2()},
// error => {}
// ).then(
// vlaue => {f3()},
// error => {}
// )
// function f1(){
// console.log('f1이 실행되었음');
// }
// function f2(){
// console.log('f2이 실행되었음');
// }
// function f3(){
// console.log('f3이 실행되었음');
// }
const data1 = () => new Promise(resolve => setTimeout(()=> resolve(3),3000))
const data2 = () => new Promise(resolve => setTimeout(()=> resolve(2),2000))
const data3 = () => new Promise(resolve => setTimeout(()=> resolve(1),1000))
// const data1 = () => new Promise((_, rej) => setTimeout(()=> rej(3),3000))
// const data2 = () => new Promise((_, rej) => setTimeout(()=> rej(2),2000))
// const data3 = () => new Promise((_, rej) => setTimeout(()=> rej(1),1000))
Promise.all([data1(), data2(), data3()]) // 마지막 처리가 끝나면 동시에 출력
.then(console.log)
.catch(console.log);
Promise.race([data1(), data2(), data3()]) // 제일 빨리 처리한것만 출력
.then(console.log)
.catch(console.log);
setTimeout(() => console.log('10'),0);
Promise.resolve()
.then(()=> console.log(20))
.then(()=> console.log(30));
const promises = [];
data1().then( value => {
promises.push(value);
return data2()
})
.then(value => {
promises.push(value);
return data3()
})
.then(value => {
promises.push(value);
console.log(promises)
})
</script>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| js 시계 + 타이머 만들기 (0) | 2023.01.03 |
|---|---|
| setTimeout / setInterval 사용 요약 (0) | 2023.01.03 |
| addEventListener 활용2 (0) | 2023.01.03 |
| addEventListener 활용1 (0) | 2023.01.03 |
| js 기초6 (0) | 2023.01.03 |