Vue 비동기 통신, fetch vs axios

기본은 Promise then 방식. async await 방식은 하단에 기술.

fetch native javascript	axios vue.js 패키지와 별도로 설치, npm install axios
// import 문 불필요 fetch(url[, options]) // 프라미스 1차 return   .then(response => {     // 다음에 있는 then 이 사용할 값을 return     return response.json(); // text(). 프라미스 2차 return   })   .then(data => {     // response.json() 을 data 에 담아서 처리   })   .catch(error => { // .then(null, error => { ..... } 에 해당   }); options 내용은 아래 참조. .then(....).catch(.....).then(.....).catch(.....) 가능	import axios from 'axios'; axios(config)   .then(response => {     ... response.data ...   })   .catch(error => {     ...   }); config 내용은 아래 참조. axios.request(config) 가능 axios.head(url[, config])  가능 axios.options(url[, config])  가능
{ method: 'GET', } // 1건 또는 다건 조회	{   url: '...',   method: 'get' } axios.get(url[, config]) 가능
{   method: 'POST', // 1건 또는 다건 추가(등록)   headers: {     'Content-Type': 'application/json',   },   body: JSON.stringify(JsonObject), // 웹은 문자열로 전송 }	{   url: '...',   method: 'post',   data: JsonObject // JSON.stringify() 불필요 } axios.post(url[, data[, config]]) 가능 axios.postForm(url[, data[, config]]) 가능
{   method: 'PUT', // 1건의 모든 내용 수정. url 에 uniqueKey 포함   headers: {     'Content-Type': 'application/json',   },   body: JSON.stringify(JsonObject), // 웹은 문자열로 전송 }	{   url: '...',  // 1건의 모든 내용 수정. url 에 uniqueKey 포함   method: 'put',   data: JsonObject // JSON.stringify() 불필요 } axios.put(url[, data[, config]]) 가능 axios.putForm(url[, data[, config]]) 가능
{   method: 'PATCH', // 1건의 일부 내용 수정. url 에 uniqueKey 포함   headers: {     'Content-Type': 'application/json',   },   body: JSON.stringify(JsonObject), // 웹은 문자열로 전송 }	{   url: '...',  // 1건의 일부 내용 수정. url 에 uniqueKey 포함   method: 'patch',   data: JsonObject // JSON.stringify() 불필요 } axios.patch(url[, data[, config]]) 가능 axios.patchForm(url[, data[, config]]) 가능
{   method: 'DELETE', // 1건 삭제. url 에 uniqueKey 포함 }	{   url: '...',  // 1건 삭제. url 에 uniqueKey 포함   method: 'delete', } axios.delete(url[, config]) 가능
const data = async () => { // try ~ catch 필요   try {     const response = await fetch(url);     const result = await response.json(); // promise 에서 then 을 2회 사용한 것처럼, await 도 2번 사용   } catch(error) {   } };	const data = async () => {  // try ~ catch 필요   try {     const response = await axios.get(url);     ... response.data ...   } catch(error) {   } };

 

fetch('.....')

  .then(res => {

    if (!response.ok) return null; // 200 이 아니면 null 처리. 200~299 까지 true

    const type = res.headers.get('Content-Type'); // 헤더에 쿠키값도..

    // for(const [name, value] of res.headers) { ..... }

    if (type != 'application/json') { // 서버에서 전달받은 데이타가 json 인 경우

      throw new TypeError(`Type error, now ${type}`);

    }

    return res.json(); // 다음 then 에 json 데이타 전달

  })

  .then(data => {

    ..... // 서버에서 전달받은 데이타 처리

  })

  .catch(e => {

    // e 를 찍어 볼 것

    if (e instanceof NetworkError) {

      .....

    } else if (e2 instanceof TypeError) {

      .....

    } else {

      .....

    }

  });