axios 사용하면서 겪었던 오류

axios
            .get(`http://localhost:9999/vuews/book/${this.$route.params.isbn}`)
            .then(({ data }) => {
                this.$store.state.book = data;
                this.book = this.$store.state.book;
            });

axios
            .get(`http://localhost:9999/vuews/book/${this.$route.params.isbn}`)
            .then(({ data }) => {
                this.$store.state.book = data;
            });
            this.book = this.$store.state.book;

첫 번째 코드와 두 번째 코드의 다른 점은 this.book = this.$store.state.book 문장의 위치이다.

처음에는 axios 코드 실행 후 해당 문장이 실행될 것이라 생각해서 두번째 코드를 작성했다.

그런데 this.book의 정보를 조회해보니 비어있는 값이 나온 것을 볼 수 있었다.

 

그 이유는 axios가 비동기 통신이기 때문에 get 문장을 실행 후에 바로 then이 실행되는 것이 아니기 때문이다.

즉, then은 get으로부터 응답이 왔을 때 실행된다. 따라서 axios 문장 후에 나오는 코드가 then 보다 먼저 실행된 것이다.

따라서 스토어의 book 객체가 채워지기 전에 조회해서 this.book에 넣었기 때문에 빈 객체가 조회된 것이다.

해결책은 then 안에 넣어주면 된다. 그러면 당연히 store의 book이 조회된 값으로 채워진 후이기 때문에 원하는 값을 가져올 수 있다.