[JavaScript] Promise

 

A promise is an object that may produce a single value sometime in the future.

It is either a resolved value or a rejected one, with a reason for rejection.

And a promise may be in one of three possible states.

It can be fulfilled, rejected, or pending.

 

 

[1]  new Promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 4000)
});

promise.then(console.log)
// or
promise.then(resp => console.log(resp))

 

const promise = new Promise((resolve, reject) => {
	if (true) {
    	resolve('Stuff Worked');
    } else {
    	reject('Error, it broke');
    }
});

promise
	.then(result => result + '!')
    .then(result2 => result2 + '?')
    .catch(() => console.log('error!!')
    .then(result3 => {
    	//throw Error;
        console.log(result3 + + '!');
    })
    
    
// Stuff Worked!?!

 

 

catch 는 시작점부터 catch 전까지의 오류만 잡을 수 있다.

이후에 생기는 오류는 잡아내지 못한다.

 

 

[3] Promise.resolve() / Promise.reject()

const promise2 = Promise.resolve(
  setTimeout(() => {
    console.log("success");
  }, 4000)
);

Promise.reject('failed')
  .catch(console.log('Ooops something went wrong'))

 

 

[3] Promise.all()

const promise = new Promise((resolve, reject) => {
	if (true) {
    	resolve('Stuff Worked');
    } else {
    	reject('Error, it broke');
    }
});

cosnt promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'after 0.1 second')
});

cosnt promise3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'after 1 second')
});

cosnt promise4 = new Promise((resolve, reject) => {
	setTimeout(resolve, 5000, 'after 5 seconds')
});

Promise.all([promise, promise2, promise3, promise4])
	.then(values => {
    	console.log(values);
    }
    
// 5초 뒤에
// ["Stuff Worked", "after 0.1 second", "after 1 second", "after 5 seconds"]

 

만약 promise 변수 선언과 Promise.all 호출이 시간차를 두고 진행된다면,

Promise.all 이 호출되기 이전에 변수에 promise 값이 할당되기 때문에

5초 라는 시간 차이 없이 바로 Promise.all 이 실행된다.

 

const url = [
	'https://jsonplaceholder.typicode.com/users',
    'https://jsonplaceholder.typicode.com/posts',
    'https://jsonplaceholder.typicode.com/albums'
]

Promise.all(urls.map(url =>
    fetch(url).then(people => people.json())
))
  .then(array => {
    console.log('1', array[0])
    console.log('2', array[1])
    console.log('3', array[2])
    console.log('4', array[3])
  })
  .catch(err => console.log('ughhhh fix it!', err));