Iris.vue

콜백 지옥을 벗어나기 위해

await을 쓴다.

await을 쓰기전에 async를 반드시 써야한다.

========================================

라이브러리에 데이터를 받는 방법
axios를 설치한다.
cmd> npm i axios --save

//fetch, axios 라이브러리에 데이터를 받는 방법
    import axios from 'axios';
    export default {
        created() {  // life cycle 생명주기
            this.handleIris(); // 메소드 호출하기
        },
        data() {  // state 상태변수
            return{
                items : [],
            }
        },
        methods:{ // method 메소드 함수  ':'의 의미는 안에 여러개의 항목을 만들겠다는 뜻
            async handleIris(){ //await을 쓰기전에는 꼭 async를 붙여야 함
                // 백엔드 서버 주소
                const url = 'https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json'
                // 헤드 정의 = 호출하는 데이터의 종류가 json 헤드정의
                const headers = { ' Content-type' : 'application/json' };
                // 호출하기
                const response = await axios.get(url, headers);
                //결과값 확인
                console.log(response);
                if(response.status === 200){ // status : 200 === 정상적으로 로드 되었다는 뜻
                    this.items = response.data;
                    // [{},{},...{150}]
                    console.log(this.items);
                }
            }
        }
    }

=================================================

게시물 이동 기본 형태

// http://localhost:8080/iris1?no=1&key=asdf&name=def
기본형태
주소창의 ? 이후의 내용

{
path : '보낼페이지(iris1)',
	query : {
      no:1,
      key:'asdf',
      name:'def'
	}
}