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"]);
});
}
JavaScript
복사
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 연결 완료!'})
Python
복사
'주문하기' 버튼을 누르면
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 })
Python
복사
body에 formData를 넣어서 요청을 보내는 것이 달라졌다.
그런데 app.py에서 request.form['key']로 해당 데이터를 열게 되는데,
여기서 request.formData처럼 객체명을 기입하는 것이 아니라.
sample_receive = request.form['sample_give']
Python
복사
request.form이라는 메서드 자체가 body를 가져온다. formData라는 객체는 클라이언트에서 이미 body에 실린 상태로 백엔드로 도착했기 때문에 여기선 객체명과 무관하다는 뜻으로 보여진다.
fetch()의 body
fetch('/mars', { method: "POST", body: formData })
body는 요청에 추가하고자 하는 본문입니다.
Blob,ArrayBuffer,TypedArray,DataView,FormData,URLSearchParams, 문자열 객체 는 리터럴,ReadableStream객체를 사용할 수 있습니다. 제일 마지막은 아직 실험적 기능이므로 호환성 정보를 먼저 확인해서 사용할 수 있을지 검증하세요.
GET과 HEAD 메서드는 본문을 가질 수 없습니다.
