callback 지옥 → 가독성 저하,예외 처리의 불편함

Promise

• 자바스크립트 비동기처리에 사용되는 객체
• Promise 인스턴스 안에 비동기 처리될 대상 넣어주기
• .then() : 함수 실행이 잘 되었으면 다음을 시행 하라는 뜻
• .catch() : 함수 실행이 잘 안되었을 경우 실행

asncFunction = new Promise((resolve),(reject)) => {...});
//resolve : 비동기 함수가 문제 없이 실행되었다.
//reject : 비동기 함수가 문제 있어 호출

function 함수이름(인자값){
	return new Promise((resolve,reject)=>{
		비동기 함수(() =>{
			resolve(Promise객체의return값); //함수 실행이 잘되었으면 시행할 함수
			reject(Promise객체의return값); //함수 실행에 문자가 있으면 시행할 함수
		})
	})
)

함수이름(매개변수)
	.then((인자값)=>{실행이 되었을 경우 다음 함수})
	.catch(인자값)=>{실행이 안되었을 경우 실행될 함수});

예시)

function sayHello(name){
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            console.log(`내 이름은 ${name}이야`);
            resolve(`${name}`); //resolve의 인자에는 Promise 객체의 리턴값을 준다.

            //reject(); // 실행이 안되었을 경우
        },2000);
    } )
}

sayHello("민철")
    .then((name)=>{console.log(`그래 안녕 ${name}아`)})
    //.catch(()=>{//실행 안되었을 경우 실행할 문장})

async await : 동기함수처럼 비동기함수 읽고 쓰기

async functionName(...){
	const result = await asyncFunction();
}

async await 유무 차이

• async await로 비동기 처리가 가능한것 아니면 순서대로 처리됨

async function foo1(name){
    const resultname = await sayHello(name);
    console.log("2초 뒤 실행될 코드");
}

foo1("민철");

function foo2(name){
    const resultname = sayHello(name);
    console.log("2초 뒤 실행될 코드");
}

foo2('민철');

실전에서는 외부 정보를 갖고 올때 많이 사용됨

async await 와 예외처리는 같이 사용이 많이 됨