Promise / async / await / get / post

 

 

promise , async, await

비동기 작업이 끝난 후 특정 작업들을 실행할 수 있도록 순서를 정해주는 것

 

 

✅  Promise (비동기 방식)

Promise는 객체는 비동기 작업이 끝난 후 결과를 알려주는 용도로 사용한다.

서버에요청(Promise)
then 완료 후 실행 할 함수

 

 

Promise를 사용하면 비동기 작업이 끝난 시점을 알 수 있어서 동기 작업’처럼 구성할 수 있게 된다.

동기 작업처럼 이란 아까의 콜백 방식처럼 코드의 동작 방식이 거꾸로 된 것이 아니라 순차적으로, 서버에 요청을 하고 -> 완료 후 실행할 함수 순서가 된다는 것이다.

이 Promise 객체는 대기, 이행, 거부 이 세 가지 상태를 가진다.

각각 작업 완료 전, 작업 완료 후, 에러 발생하여 실패 라는 뜻이다.

 

사용 방법은 비동기 작업이 작업 종료 후 Promise 객체를 반환하도록 하고,

Promise 객체가 제공하는 then, catch를 이용하면 된다.

const promise = //Promise를 반환하는 비동기 작업

promise.then((result) => console.log('성공!').catch((error) => console.log('실패')

 

promise 객체에

.then() 을 붙이면 이행 상태의 처리를 할 수 있고,

.catch 를 붙이면 실패 상태를 처리할 수 있다.

 

 

✅  Axios (비동기 방식)

Axios는 브라우저, Node.js를 위해서 만들어진 Promise를 활용하는(기반으로 만들어진) HTTP 비동기 통신 라이브러리다. (백엔드와 프론드 엔드 간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 함.)

특징으로는

1. Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.

2. Promise(ES6)를 사용. (promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체.)

3. 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경

 

 

✅  async, await (비동기 방식)

await 서버에요청
완료후 실행 할 함수

 

그런데 뒤에 뭔가를 안 붙이고, 더 간단하게! 비동기 작업을 동기적인 것처럼 만들어주는 것이 await이다.

사용법이 더 간단하다. 비동기 작업 앞에 await 키워드만 붙이면 된다. 그러면 비동기 작업이 결과를 낼 때까지 기다린다. (모든 작업이 종료 X 내가 사용할 결괏값이 나올 때까지 기다린다는 의미) 메인 작업들은 멈추지 않고 await을 포함하고 있는 함수만 일시 정지된다.

 

그리고 이 await는 혼자만 쓸 수 없는데, await와 세트로 쓰는 것이 바로 async 다.

async는 선언된 함수 내에 비동기적으로 실행될 내용이 있다는 걸 알리는 거다. 그리고 그 비동기적으로 실행될 내용 앞에 await을 붙여서 표시한다. async를 붙인 함수는 Promise 객체를 반환한다.

 

즉..

동기적 순서로 처리할 일이 있는 비동기 작업에 await를 붙이고, 해당 작업을 포함하고 있는 함수에 async 를 붙이면 된다.

 

 

정리

Promise	async	await	Axios
비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체	함수에서 비동기 처리를 위한 promise 동작을 한다는 것을 명시	호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작	Promise API를 활용하는 HTTP 비동기 통신 라이브러리

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

const axios = require(`axios`)

axios.get('...')

   // 응답(성공)
   .then(function(response){
   	console.log(response);
   })
   
   // 응답(실패)
   .catch(function(error) {
   	console.log(error);
   })
   
   // 응답 (항상 실행)
   .then(function(){
   	// ...
   })

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

async await 사용

async function ...(){
	try{
  	const response = await axios.get('...');
      console.log(response);
  	} 
  	catch(error){
  	console.error(error);
  	}
}

 

전송

1. GET

서버로부터 데이터 받아옴

• URL에 변수(데이터)를 포함시켜 요청
• 데이터를 Header에 포함하여 전송
• URL에 데이터가 노출되어 보안에 취약
• 캐싱 가능

캐싱 : 한번 접근 후 재요청시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것

const axios_get = () => {
	axios.get("http://localhost:8080/get")
    	.then((response) => {
        	console.log(response);
        })
        .catch((error) => {
        	console.log(error);
        })
}

2. POST

서버로 데이터를 전송하여 자원을 생성

• JSON 형식이나 객체 형식으로 데이터를 전송 가능
• URL에 변수(데이터)를 노출하지 않고 요청
• 데이터를 Body에 포함시킨다.
• URL에 데이터가 노출되지 않아서 기본 보안 되어 있음
• 캐싱 불가능
• 문자열 뿐만 아니라, 라디오 버튼, 텍스트 박스와 같은 객체들의 값도 전송 가능

const axios_post = () => {
	const data = {
    	name : 'name',
        age: 23
    }
    
    axios.post("http://localhost:8000/post", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error);
        })
}

3. PUT

서버에 존재하는 Database 자원을 수정

4. DELETE

서버에 존재하는 Database 자원을 삭제

// DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣기
const axios_delete = () => {
	axios.delete("http://localhost:8080/delete",
    {
    	data: {
        	postId: ...
            commentId: ...
        }
    });
}

config option과 응답 스키마

{
	// `data`는 서버가 제공한 응답(데이터) 입니다.
    data: {},
    
    // `status`는 서버 응답의 HTTP 상태 코드입니다.
    status: 200,
    
    // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
    statusText: 'OK',
    
    // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
    headers {},
    
    // `config`는 요청에 대해 `axios`에 설정된 구성(config) 입니다.
    config: {},
    
    // `request`는 응답을 생성한 요청입니다.
    // 브라우저: XMLHttpRequest 인스턴스
    // Node.js: ClientRequest 인스턴스(리디렉션)
    request: {}
}

async, await

JavaScript에서 가장 최근에 등장한 비동기 처리 패턴
Promise 를 편하게 사용 가능

async

• async 키워드는 함수의 앞에 붙어서 사용
• async를 사용하게 되면 항상 Promise 를 반환
• 만약 반환값이 Promise가 아니라면 이행상태의 Promise(Resolved Promise) 형태로 값을 감싸 반환

const async = async () => {
	return "test";
}

console.log(async());
async().then((data) => {
	console.log(data);
})

await

• await 키워드는 async 함수 안에서만 사용할 수 있다
• 함수 안에서 await를 만나게 되면 Promise가 처리될 때까지 대기
• await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있습니다.