[javascript] callback/ promise

callback

val = function (~) {  //val은 함수
return ~
}

	function fn(arg){  // val을 다른 함수의 입력값으로 전달
    arg();   //val을 다른 함수내에서 호출
    }
    fn(val);  // 다른 함수에 의해서 나중에 호출된다=> callback function

promise( then,catch)

악 벨로그 넘 별루다...
내 글 다 날라갔어!!
대체 왜 유명한거야...

동기 (synchronous): 순차적 실행 (파악이 쉬움)
vs 비동기 (asynchronous): 병렬적으로 동시에 실행 ( 속도가 빠름)

• Promise를 사용하는 이유: 비동기적인 작업을 처리할 때 그 작업의 성공/실패 여부를 표준화된 방식을 이용해서 처리할 수 있도록 해줌

fetch

fetch 함수의 return 값: a promise that resolves to a response object

• return 값이 promise 인 함수는 비동기적인 함수일 가능성이 매우 높음
• fetch.then((response)=>{}): //fetch를 통해서 실행한 결과가 성공했을 때 콜백함수를 실행
• fetch.catch((reason)=>{})://fetch를 통해서 실행한 결과가 실패했을 때 콜백함수를 실행
• 첫번째 파라미터인 response/ reason으로 결과값/이유를 받음
• response는 response 타입의 객체를 받음

fetch(url)
.then((response)=>{response.json()}) // json data type인 데이터를 받았다는 것을 의미, 
javascript 데이터 타입으로 변환해줌, response.json()가 리턴하는 값 또한 promise 
.catch((reason)=>{})


.then((response)=>{
response.json().then(()=>{})})  //Nested promise : then 안에 then

.then((response)=>{
return response.json()}
.then(()=>{})  //Promise chaining : then 과 then을 연결, 일반적으로 사용

• promise를 사용하게 되면 그 즉시 pending 상태 (진행중, 대기중)
• 성공시 then() 호출: resolved 상태
• 실패시 catch() 호출: rejected 상태
• then이던 catch던 새로운 promise를 리턴하면: 다시 pending 상태

new promise

• 프로미스를 만들때는 그 프로미스를 이용해서 실행한 작업이 성공했는지 실패했는지를 알려주기 위한 콜백함수가 공급되어야 한다.

function job1() {
return new Promise((resolve, reject)=>{  // 첫번째 파라미터는 성공했을 때 호출할 함수, 
두번째 파라미터는 실패했을 때 호출할 함수
setTimeout(function(){   // 프로미스는 비동기적인 작업을 처리하기 위해 사용
 resolve('resolved');  // 성공적으로 끝났을 때의 결과 데이터 전달
 }})
 }

• promise에 전달된 콜백함수 안에서 성공인지 실패인지 알려줘야 함

jobs1().then((data)=>{}) // jobs1() 은 내가 만든(공급한) promise

job1().then(data=> 
~~
return job2();  // job2()도 동일한 형태의 함수
})
.then(data=>
~~})