인프런 커뮤니티 질문&답변

강의에서 axios 요청이 너무 빨라서 뜨지 않는다라고 설명해주셨는데, 이부분은이 잘못된거 같습니다. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then 

// using a resolved promise, the 'then' block will be triggered instantly, 
// but its handlers will be triggered asynchronously as demonstrated by the console.logs
const resolvedProm = Promise.resolve(33);

let thenProm = resolvedProm.then(value => {
    console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
    return value;
});
// instantly logging the value of thenProm
console.log(thenProm);

mdn의 설명을 보면, promise가 resolve 된 이후, then() 메서드 안의 핸들러는 비동기적으로 호출 된다고 설명하고 있습니다. 

(복사붙여 넣기를 하니 포맷이 이상해져서 읽기 불편한점 죄송합니다)

그래서 테스트를 해보았습니다. 

 //views/NewsView.vue
created() {
  bus.$emit("start:spinner");
// setTimeout(() => {
// }, 3000);
  this.$store.dispatch("FETCH_NEWS")
    .then(result => {
      bus.$emit("end:spinner");
      console.log("result");
      console.log(result);
      return result;
    })
    .catch(err => {
      console.error(err);
    });
}

//store/actions.js
export default {
  FETCH_NEWS(context) {
    fetchNewsList()
      .then(res => {
        context.commit('SET_NEWS', res.data);
        console.log('actions');
        console.log(res);
        return res;
      })
     .catch(err => {
        console.error(err);
      });
    },
}
//api/index.js
function fetchNewsList() {
  console.log('api call');
  return axios.get(`${config.baseUrl}news/1.json`);
}