[230425] Ajax

🪄 Ajax

Promise

"약속"

// 커피를 주문하는 프로미스 객체를 생성한다
// 생성자에는 약속을 지키기 위한 resolve 함수와, 약속을 지키지 못했을 때를 대비한 reject 함수(executor 함수)를 인자로 전달한다
const orderCoffee = new Promise((resolve, reject) => {

  const requestObj = new XMLHttpRequest();
  requestObj.open('GET', 'orderCoffee.txt');
  requestObj.onreadystatechange = () => {
      if (requestObj.readyState === 4 && requestObj.status === 200) {
          const result = requestObj.responseText;

          // resolve 메소드가 실행되면 then 메소드가 자동으로 호출된다
          resolve(result);

          // resolve 메소드 호출이 없는 상태에서 reject 메소드가 실행되거나 통신에 문제가 발생하면 catch 메소드가 자동으로 호출된다
          // reject(result);
      }
  };
  requestObj.send();
});

// then 메소드를 사용하면 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있다

// resolve 메소드가 실행될때 전달된 인자(비동기 통신 결과)는 then 메소드의 콜백함수의 인자로 전달된다
orderCoffee.then((asyncResult) => {
  console.log(asyncResult);
  console.log('약속이 이루어졌습니다.');
  return asyncResult; 
}).catch((error) => { // then 메소드는 프라미스 객체를 반환하기 때문에 catch 메소드를 이어서 쓰는것이 가능하다
  console.log(new Error('커피주문이 정상적으로 이뤄지지 않았습니다.'));
})

💡 resolve 함수에 전달되는 인자는 비동기 통신의 결과가 맞지만 promise의 비동기 처리 결과는 아니다. promise의 비동기 처리는 then 메소드 안에서 이루어진다. promise는 서버 통신과 직접적인 관련은 없다.

fetch

XMLHttpRequest를 대체할 새로운 API 등장

let result = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
console.log(result);	// 먼저 실행돼서 Promise {<pending>}

fetch는 함수처럼 바로 실행할 수 있다. fetch 함수를 실행하면 바로 인자로 전달한 url에 접근하여 데이터를 다운로드 받는다. 다운로드가 완료되면 바로 fulfilled 상태의 promise가 반환된다.

let result = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
result.then((data) => {
    console.log(data);
}

fulfilled 상태의 promise를 반환하기 때문에 then을 통해 데이터를 가져올 수 있다. 그리고 콘솔을 보면 이번에는 Response라는 객체가 출력된다. Response 객체에는 요청에 대한 종합적인 응답 정보가 저장되어 있다.

우리가 필요한것은 JSON 데이터이기 때문에 .json() 메서드를 통해 자바스크립트 객체로 변환이 가능한 promise 객체를 반환받을 수 있다. 때문에 여기서 한번 더 then 메소드를 이용해야 우리가 필요한 데이터를 뽑아낼 수 있다.

let result = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
result.then((data) => {
	return data.json()
})
	.then((result) => {
		console.log(result);
		return result;
	})
	.catch((result) => {
		console.log(new Error(result));
	});

async, await

async 키워드는 어떤 함수든 프로미스 객체를 반환하게 만들 수 있다. (심지어 return 키워드가 없어도!)

async function test(){}
console.log(test());	// Promise {<fulfilled>: undefined}

await 키워드는 반드시 async 함수 안에서만 사용할 수 있다.
await는 async 함수안에서 promise 객체를 반환할 때까지 다음 코드를 실행시키지 않고 기다리게 만들어준다. 그리고 프라미스 객체의 fulfilled 값을 반환한다.

async function message() {
    let hello = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('hello');	// hello 반환
        }, 100)
    })

    let world = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('world');	// world 반환
        }, 100)
    })

    console.log(`${hello} ${world}`);
}

message();	
// Promise {<pending>}
// hello world