11장: axios를 이용한 HTTP 통신

11장: axios를 이용한 HTTP 통신

11.1 axios란?

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data');
    }
  }
};
</script>

요약: axios는 HTTP 요청을 쉽게 처리하는 자바스크립트 라이브러리입니다.

11.2 테스트용 백엔드 API 소개

<script>
export default {
  data() {
    return {
      apiUrl: 'https://jsonplaceholder.typicode.com/posts'
    };
  }
};
</script>

요약: 테스트용 API는 개발 중 데이터를 시뮬레이션하는 데 사용됩니다.

11.3 프로젝트 생성과 크로스 오리진 오류 발생

<script>
import axios from 'axios';

export default {
  mounted() {
    axios.get('https://api.example.com/data')
      .catch(error => console.log(error));
  }
};
</script>

요약: 다른 도메인에 요청 시 크로스 오리진 오류가 발생할 수 있습니다.

11.4 크로스 오리진 문제란?

<template>
  <div>크로스 오리진 문제 확인</div>
</template>
<script>
export default {
  mounted() {
    console.log('CORS 제한으로 요청이 차단됨');
  }
};
</script>

요약: 크로스 오리진은 보안 정책으로 도메인 간 요청을 제한합니다.

11.5 크로스 오리진 문제 해결 방법

11.5.1 CORS

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data', {
        headers: { 'Access-Control-Allow-Origin': '*' }
      });
    }
  }
};
</script>

요약: CORS는 서버에서 허용된 도메인 요청을 처리합니다.

11.5.2 프록시를 이용한 우회

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('/api/data'); // 프록시 설정 후 요청
    }
  }
};
</script>

요약: 프록시는 클라이언트와 서버 간 요청을 중계합니다.

11.6 axios 라이브러리 사용법

11.6.1 Promise와 async~await

<script>
import axios from 'axios';

export default {
  methods: {
    async fetchData() {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      console.log(response.data);
    }
  }
};
</script>

요약: async/await는 Promise를 간결히 처리합니다.

11.6.2 axios 라이브러리 사용 방법

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => console.log(response.data));
    }
  }
};
</script>

요약: axios는 GET, POST 등 HTTP 메서드를 지원합니다.

11.6.3 에러 처리

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/invalid')
        .catch(error => console.error('Error:', error));
    }
  }
};
</script>

요약: catch로 HTTP 요청 에러를 처리합니다.

11.7 마무리

<template>
  <div>axios로 데이터 가져오기 완료!</div>
</template>
<script>
import axios from 'axios';

export default {
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(() => console.log('완료'));
  }
};
</script>

요약: axios로 HTTP 통신을 쉽게 구현할 수 있습니다.