Wireframe

m.request()를 사용하여 서버에 요청 보내기 (mithril)

웹 애플리케이션이 서버와 통신할 때에는 form submit을 통해서 요청을 보내거나, XMLHttpRequst를 사용해서 비동기로 요청하는 방법이 있다. Mithril에서는 m.request()를 사용해서 보다 손쉽게 서버 통신을 처리할 수 있다.

기본적인 GET요청을 보내고 응답을 받는 방법

m.request() 에 요청을 보낼 주소와 부가적인 정보를 넘겨주면 응답을 처리할 수 있는 Promise 객체를 리턴받게 된다. 이때, 기본적으로 서버 응답은 JSON 형식으로 돌아오는 것을 가정하고, mithril은 JSON을 내부에서 파싱하여 자바스크립트 객체로 변환한 후 promise 객체에게 넘겨준다. 따라서 간단하게 다음과 같이 요청을 보내고 응답을 처리하는 방식으로 코드를 작성할 수 있다.

m.request({method: "GET", url: "/api/v1/users",)
  .then(users => console.log(users));

요청 주소 및 그외 정보는 다음과 같은 키를 사용해서 객체를 구성하여 전달하게 된다.

예제 : 파일 업로드 구현

mithril을 사용하지 않더라도 비동기 파일 업로드는 폼데이터 객체를 생성해서 해당 데이터를 POST로 서버에 전달하는 것으로 구현하면 된다. m.request()를 사용할 때에도 폼데이터를 생성하는 것은 동일하다. 대신 폼 업로드의 경우에는 요청 정보를 JSON으로 변환하지 않으므로 serialize 옵션을 따로 지정해줘야 한다. 다음 코드는 파일 선택 버튼을 페이지에 추가하고, 파일을 선택했을 때 해당 파일을 업로드하는 액션을 구현한 것이다.

const upload = (e) => {
    let file = e.target.files[0];
    let data = new FormData();
    data.append('file', file);
    m.request({
        method: "POST", 
        url: "/api/v1/upload", 
        data: data, 
        serialize: (v) => v
    });
};

m.render(document.body, 
    m("input[type=file]", {onchange: upload})
);

예제: 업로드 과정 표시하기

요청 옵션의 config 키를 사용하여, xhr 객체에 대한 이벤트처리를 할 수 있다. progress 이벤트가 발생할 때마다 진행률을 계산해서 화면에 업데이트할 때의 대략의 예를 보이면 다음과 같다.

function foo(e) {
	var data = new FormData();
	data.append(e.target.files[0]);
	m.request({
		method: "POST",
		url: "/api/upload",
		body: data,
		config: (xhr) => {
			xhr.upload.addEventListener("progress", (e) => {
				progress = e.loaded / e.total * 100
				// force to redraw
				m.redraw()
			})
		}
	}).then((res) => console.log(res))
}

예제: 파일 다운로드

파일을 업로드하는 것과 마찬가지로, 파일을 가져오는 동작 역시, deserialize 옵션을 주어 파일 정보를 JSON으로 파싱하지 않도록해주면 된다. 여기서는 svg 파일을 읽어오는데, m.trust() 함수를 사용해서 이를 바로 DOM 요소로 만들어서 화면에 그릴 수 있다.

// load svg and render it
m.request({mothod:"GET", url:"/files/icon.svg", deserialize:(v)=>v})
    .then(it => m.render(document.body, m.trust(it)));

연관 글

  1.  mithril 앱의 기본 구성 및 m()
  2.  m.render() – 가상 DOM 렌더링하기
  3. m.mount – 가상 노드를 마운트하기
  4. m.prop() – 양방향 바인딩을 위한 데이터 래퍼 – deprecated
  5. m.withAttr() 이벤트 핸들러 처리
  6. m.component – 가상노드를 컴포넌트로 사용하기
  7. Todo 앱 예제
  8. m.route() – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버와의 통신
Exit mobile version