[Flask] Flask framework 미니프로젝트(project mars) 05 (Backend 기초 테스트 POST 요청 및 응답)

1. 클라이언트와 서버 연결 확인하기(테스트용)

GET 방식과 비슷하지만

요청 할 때 body를 추가하여 요청하는 부분이 다르다.

body를 request.form으로 받게되는 부분이 추가된다.

 

 

• 어떤 이벤트에 함수를 연결 할 지 확인
• "주문하기" button의 onclick 이벤트로 JavaScript의 save_order() 함수 호출
• JavaScript의 save_order()라는 함수 실행
• formData라는 객체를 생성
• {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해  formData에 담기
• save_order()내부 fetch()를 통해 '/mars' URL에 대한 POST 방식 요청 (+ 위 formData 객체를 body로 추가하여 요청함)
• app.py에서 '/mars' URL의 POST 방식 요청에 대한 메서드로 접근
• 이는 mars_post()라 선언된 함수를 실행하는데 
• request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.
• print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에  '샘플데이터'를 출력
• 이후, 연결 테스트용으로 {'msg' : 'POST 연결 완료!'} 라 하드코딩된 key, value가
• jsonify()에 의해 json 형식의 데이터로 변환(주어진 값과 대응하는 JSON 문자열) 후 반환하고
• 반환 데이터는 첫번째 then()절의 res 인자값으로 들어감
• JavaScript로 다시 돌아와서 첫번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
• 해당 객체 데이터는 data라는 변수에 담기고
• alert를 통해 key msg의 value인 'POST 연결 완료!'가 출력됨. 

JavaScript

// [Create]
function save_order() {
    let formData = new FormData();
    formData.append("sample_give", "샘플데이터");

    fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
        console.log(data);
        alert(data["msg"]);
    });
}

app.py

# fetch('URL')부분, 반환값은 res로 전달.
# "localhost:5001/mars" URL POST방식 요청에 응답
@app.route("/mars", methods=["POST"])
def mars_post():
    # request.form을 통해 요청에 함께 담겨진 body(==formData)를 가져옴
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결 완료!'})

'주문하기' 버튼을 누르면

Dictionary 데이터가 담긴 formData 객체가 POST 요청에 body로 담겨진 후

request.form에서 key로 value를 뽑아낸 데이터가 print(sample_receive)로 출력 되는 것을 확인 할 수 있다.

이후 jsonify로 {'msg':'POST 연결 완료!'}라는 Dictionary 데이터가 json으로 반환되고

json->res->promise(res.json)->data로 변환되며 브라우저 콘솔과 알림창에 'POST 연결 완료'가 출력되는 모습이다. 

 

---

fetch()에서 GET 요청과 달리 POST에서는

    let formData = new FormData();
    formData.append("sample_give", "샘플데이터");
    
fetch('/mars', { method: "POST", body: formData })

body에 formData를 넣어서 요청을 보내는 것이 달라졌다.

그런데 app.py에서 request.form['key']로 해당 데이터를 열게 되는데,

여기서 request.formData처럼 객체명을 기입하는 것이 아니라.

sample_receive = request.form['sample_give']

request.form이라는 메서드 자체가 body를 가져온다. formData라는 객체는 클라이언트에서 이미 body에 실린 상태로 백엔드로 도착했기 때문에 여기선 객체명과 무관하다는 뜻으로 보여진다.

 

fetch()의 body fetch('/mars', { method: "POST", body: formData }) body는 요청에 추가하고자 하는 본문입니다. Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 문자열 객체 또는 리터럴, ReadableStream 객체를 사용할 수 있습니다. 제일 마지막은 아직 실험적 기능이므로 호환성 정보를 먼저 확인해서 사용할 수 있을지 검증하세요. GET과 HEAD 메서드는 본문을 가질 수 없습니다. https://developer.mozilla.org/ko/docs/Web/API/fetch

---

해당 프로젝트는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Flask_project_mars

GitHub - yzpocket/Flask_project_mars: [Flask] Flask framework 미니프로젝트(project mars)