7) Django to the server with fetch

지난번에 DRF를 통해 만든 API를 사용해보기 위해 javascript의 fetch를 사용해서 method와 data를 보내보자.

 

 

// get
let get = () => {
    fetch('../tests/') // http://127.0.0.1:8000/api/tests/
        .then((response) => response.json())
        .then((data) => console.log(data.results));
};

let post = () => {
    const data = {
        name : 'eric',
        age : 38
    };

    fetch('../tests/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
    console.log('성공:', data);
    // window.location.replace("../test/");
    })
    .catch((error) => {
    console.error('실패:', error);
    });
};


let update = () => {
    const data1 = { //put 사용시 필드를 하나라도 빼먹으면 오류(400).
        name: 'test',  
        age: 21,
       };

    fetch('../tests/17/', {
    method: 'PUT', //PUT or PATCH
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data1),
    })
    .then(() => {
        window.location.replace("../test/");
    });
};


let delete_ = () => {
    fetch('../tests/17', {
    method: 'DELETE', 
    })
    .then(() => {
        window.location.replace("../test/");
    });
 };

 

HTML에는 간단히 button으로 위의 method를 실행하게 하였다.

기존에 저장되어 있는 내용을 모두 담은 json 형식의 데이터를 볼 수 있다.

 

get() 실행 console.log 결과

 

post 역시 잘 적용되었다. id 값은 primary key를 지정하지 않았을 때 자동 생성되는 값이다.

 

post() 실행 console.log 결과

 

update를 실행한 뒤, get을 실행한 화면이다. 기존 데이터에서 맨 아래에 데이터가 하나 더 추가 되었고, id값 17에 대한 update가 반영되었다. update는 put 또는 patch로 실행되는데 put의 경우 수정을 하고자 하는 json data를 보낼 때 database에서 만든 fields 중에서 하나라도 빠지면 에러(404)가 발생한다.  patch의 경우 fields 중 하나에 해당하는 json data를 보내도 실행된다.

 

update() 실행 후 get()

 

delete를 실행하면 다시 맨 아래의 데이터가 삭제된 것을 알 수 있다. 

 

delete() 실행 후 get()