"The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network."
프론트엔드는 api를 호출해서 백엔드로부터 데이터를 받는다. 이 때 fetch()함수를 사용하여 통신을 한다. fetch()는 web API의 일종으로, 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수이다.
기본적인 fetch() 함수의 구성은 다음과 같다.
fetch(api 주소)
.then(function(res) {
return res.json();
})
.then(function(result) {
console.log(JSON.stringify(result));
});
상기 코드를 보면 .then이 두 번 있고 첫번째 then에서는 res.json()을 반환한다. 첫번째 then 함수에 전달된 인자인 res는 응답의 정보를 담고있는 객체(response object)이며, 실제 데이터가 아니다. 따라서 응답으로 받는 body 데이터를 사용하기 위해서는 동 response object의 json 함수를 호출, 반환하여야한다.
@utils.signin_decorator
def post(self, request):
try:
data = json.loads(request.body)
user_id = request.user.id
chosen_products = data['chosen_product']
target_cart, flag = Order.objects.get_or_create(user_id = user_id,
order_status_id = 1)
target_options = [chosen_products[i]["product_option_id"]
for i in range(0, len(chosen_products))]
for option in target_options:
if OrderProduct.objects.filter(order = target_cart.id,
product_option = option).exists():
return JsonResponse(
{'message':'ALREADY_EXISTS'},
status=409)
target_products = [ProductOption.objects.get(id = target_options[i]).product_id
for i in range(0, len(target_options))]
target_amount = [chosen_products[i]['amount']
for i in range(0, len(chosen_products))]
for j in range(0, len(target_options)):
OrderProduct(
product_amount = target_amount[j],
order_id = target_cart.id,
product_id = target_products[j],
product_option_id = target_options[j]
).save()
return JsonResponse(
{"message":"PRODUCT_ADDED"},
status=201
)
except KeyError:
return JsonResponse(
{"message":"KEY_ERROR"},
status=400
)
handleCart() {
console.log("test1", this.state.chosenProduct);
fetch(`${API_CY}/order/cart`, {
method: "POST",
headers: {
Authorization: localStorage.getItem("token")
},
body: JSON.stringify({ chosen_product: this.state.chosenProduct })
})
.then(res => res.json())
.then(res => {
if (res.message === "ALREADY_EXISTS") {
alert("이미 장바구니에 담겨있다구!");
} else {
alert("장바구니에 저 ! 장 !");
}
});
}
api 주소({API_CY}은 Config 파일에 저장된 내 ip주소)
post 메소드로 요청 보냄
로컬 스토리지에 저장된 토큰을 헤더에 담아 보냄. utils.py의 "token =request.headers.get('Authorization', None)"와 연결된다.
장바구니에 담을 물건들을 body에 담아 보낸다. 내가 쓴 "chosen_products = data['chosen_product']"와 연결됨.
내가 쓴 "return JsonResponse({'message':'ALREADY_EXISTS'},status=409)"에서 연결됨. 내가 응답으로 'ALREADY_EXISTS'를 보내는 경우 실행될 함수이다.
그 외 "return JsonResponse({"message":"PRODUCT_ADDED"},status=201)"의 경우 실행될 함수