221205 TIL

 

👩🏻‍💻 백엔드와 프론트엔드 API 연결(javascript)

: 처음 했을 때는 진짜 너무너무너----무 어려웠는데 3번째 하는 거라 그래도 아주아주아주 조금은 알것 같아서 다행이다. ㅠ.ㅠ

 

// 2. 제품 정보 불러오기
async function handlePerfumeInfo(){

    const response = await fetch('http://127.0.0.1:8000/perfume/3', {
        headers: {
            "Authorization":"Bearer" + localStorage.getItem("access"),
        },
        method: 'GET',
    })
    .then(response => {
        if(!response.ok){
            if(response.status==401){
                alert("로그인한 유저만 접근 가능합니다! 로그인해주세요 :)")
                location.href="/signin.html";
            }
            else if(response.status==404){
                alert("경로가 잘못되었습니다! 다시 입력해주세요 :)")
                location.href="/index.html";
            }
            throw new Error(`${response.status} 에러가 발생했습니다.`);    
        }
        return response.json()
    })
    .then(result => {
        const response_json = result;
        let perfume = response_json;

        let review_perfume_detail = document.getElementById("review_perfume_detail");
        review_perfume_detail.innerHTML= '';

        let perfume_detail = document.createElement('div');
        perfume_detail.className = 'sec_create_review_body';
        perfume_detail.innerHTML = `
        <div class="create_review_body_title">
            <div class="review_image_box">
                <img class="review_image" src="${perfume['image']}">
            </div>
            <div class="review_body_desc_box">
                <div class="desc_box_brand">
                    <p>${perfume['brand']}</p>
                </div>
                <div class="desc_box_name">
                    <p>${perfume['title']}</p>
                </div>
            </div>
        </div>
        `;
        review_perfume_detail.append(perfume_detail);
    })
}

-> perfume_id 가 3인 perfume 모델 불러오기 성공!