Vue.js-axios, await, async

써니·2023년 1월 25일
0

vue.js

목록 보기
14/15

VueJs

Axios

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다.
Promise 기반의 HTTP 통신 라이브러리이며
상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고
API가 다양합니다

액시오스 참고자료

axios가 HTTP 통신을 위한 라이브러리라는 것은 이해했다.
그렇다면 Promise란 무엇일까?
Promise를 알기전엔 자바스크립트 비동기 처리 방식을 이해해야한다.


비동기 처리 방식

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


비동기 처리 방식이란?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined
// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

흔히 아는 자바스크립트의 비동기 처리 방식은
Jquery의 Ajax, setTimeOut()이 있다.
이러한 방식은 빠르게 처리된다는 장점이 있지만 실행순서가 지켜지지 않고
빠르게 처리되는게 먼저 실행된다.

이러한 문제점을 해결한 것이 바로 콜백함수(callback)이다.




콜백함수(callback)

콜백함수 방식

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

데이터가 준비된 시점에서만 저희가 원하는 동작(특정 값을 출력한다 등)을 수행할 수 있습니다.


콜백지옥(Callback hell)

비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다.
가독성이 떨어지고 로직 변경이 어렵다.

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

이러한 콜백 지옥을 해결하는 방법이 바로
Promise나 Async이다.




Promise

프로미스란?
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.
데이터를 받아오는 중에 비동기처리 방식으로 화면을 띄우다가 오류가 날 수 있는데 프로미스가 이런 문제점을 해결함

Promise 방식

unction getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

Promise 3가지 상태

  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
    new Promise
new Promise(function(resolve, reject) {
  // ...
});
  • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
    resolve() then() 처리결과 반환
new Promise(function(resolve, reject) {
  resolve();
});
  • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
    reject() catch() 실패 처리의 결과 값
new Promise(function(resolve, reject) {
  reject();
});


프로미스 에러처리

.then()인자에서 에러처리를 할 수 있지만 더 많은 에러처리를 위해서 catch() 사용 권장




async & await

참고: async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠.


콜백함수와 async & await의 차이

콜백함수

function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

async & await

// async & await 적용 후
async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

async & await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다.
일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다.


async & await 예외처리

try/catch로 처리




Axios

다시돌아와 axios는 http 통신 라이브러리이다.
http 통신을 하는 비동기 처리 메서드는 프로미스 객체로 반환해야한다.
그렇기 때문에 응답제어는 성공했을 때 then(), 실패했을 때 catch()이다.


액시오스 HTTP 요청 메서드 종류

  1. axios.get(url[, config])

두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있습니다.

  1. axios.post(url[, data[, config]])
  2. axios.delete(url[, config])

액시오스 config

  • method
  • url
  • baseURL

    baseURL은 액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성입니다. 보통 http://mysite.com/api/v1/처럼 API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다.

  • header

    헤더를 수정해서 보내야 한다면 headers를 사용하면 됩니다.

  • params
    보통 get요청-qs.stringify(req);

  • data

    HTTP 요청 보디에 실어서 보낼 데이터를 의미합니다. 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용합니다.

  • timeout

    timeout은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성입니다. 요청 시간이 지정된 값을 초과하면 에러가 발생합니다.

  • responseType

    responseType은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다.




총정리

자바스크립트 비동기 처리 패턴에는 크게 4가지가 있다

  1. jQuery Ajax
  2. 콜백함수(callback)
  3. promise
  4. async & await

  • ajax는 비동기 처리 패턴의 문제점으로 순서대로 반환하지 않음
  • callback 함수는 이를 보안하지만 콜백 여러번 호출시 코드가 보기 어렵고 로직 변경이 어려움
  • promise가 이를 보안함 / 보통 서버에서 받아온 데이터를 화면에 표시할 때 사용
  • async & await 가장 최근에 나온 비동기 처리 패턴이며 콜백함수와 프로미스의 단점을 보완함 / 코드가 간결해서 개발자가 보기 쉬움

지금 내가 쓴 코드로 async & await 사용법을 설명하겠다.
아이템의 상세정보를 가져오는 로직이다.

async & await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}
async itemDetail() {
      let req = new ItemDetailRequest();
      req.productNum = this.id;
      console.log(req);
      try {
        let res = await this.api.itemDetail(req);
        if (res.code === ResultCode.Success) {
          this.itemVo = res.itemVo;
          console.log(res);
        }
      } catch (e) {
        console.error(e);
      }
    },

기본 문법에 따라 적은 것이고 예외처리는 try/catch로 처리한다.
async 앞에는 메소드이름
그리고 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙는다.
여기서 http 통신을 하는 비동기 처리 메소드는
무조건 promise 객체로 다음과 같이 반환해야한다.

itemDetail(req) {
    const url = '/api/v1/item/item-details?' + qs.stringify(req);
    return new Promise((resolve, reject) => {
      axios.get(url).then(res => {
        if (res.status === 200) {
          resolve(res.data);
          return;
        }
        console.error(res.status, res.statusText);
        reject(null);
      })
      .catch((err) => {
        reject(err);
      })
    });
  }

promise는 then/catch로 예외처리를 하고
then에서 resolve는 응답한 데이터를 반환하고
catch에서 reject는 실패한 에러를 반환한다.

0개의 댓글