자바스크립트 Promise

Promise

- 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고

다음 코드를 먼저 실행하는 자바스크립트의 특성.

- promise 객체 사용(Javascript에서 비동기 함수 로직을 처리한 이후의 결과를 얻기 위한 객체)

- 이때 promise는 인자로는 Executor를 받는데,

  이는 resolve 와 reject 라는 두 개의 함수를 매개변수로 받는 실행함수.

  연산이 성공적으로 완료되었을 때 resolve함수를 호출하고,

  오류가 발생하면 reject함수를 호출.

- promise는 다음 세가지 상태 중 하나의 상태.

• pending(대기): 비동기 처리 로직이 이행되거나 거부되지 않은 상태

new Promise(function(resolve, reject) {
  // ...
});

• fulfilled(이행): 비동기 처리가 성공적으로 완료되어 프로미스가 결과 값을 반환해준 상태

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(()=>{
    	resolve("resolve!!")
    },3000);
  });
}

// resolve()의 결과 값 "resolve!!"를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 3초후 "resolve!!"
});
/*
Promise { <pending> }
Promise { <pending> }
Promise { <pending> }
Promise { 'resolve' }
Promise { 'resolve' }
Promise { 'resolve' }
				...
*/

• rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

- Promise 객체

   .then(콜백함수) '완료 되었을 때'

   .catch(콜백함수)  '실패 했을 때'

 

Chaining Promise

function Hello() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('안녕') }, 100)
    })
}

function Nice() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('반가워') }, 100)
    })
}

Hello()
.then(data => {
    console.log(data)
    return Nice()
})
.then(data => {
    console.log(data)
})

--

let num = new Promise((resolve, reject) => {
    resolve(1);
});

let plus = function (num) {
    return num = num + 1
};
// let plus = num => num + 1

num
    .then(plus)
    .then(data => {
        console.log(data)
    })

Fetch API

- Fetch api는 네트워크 통신을 위해서 제공되는 api이다.

- promise 객체를 반환한다.

- request, response라는 두 객체를 사용한다.

 

 

 

 

 

<출처>

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

https://webcoding.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98%EB%9E%80

[JavaScript] 자바스크립트 콜백(callback)함수란?