[실전 강좌] API & this & 비동기처리 Callback & Promise

김희주·2023년 1월 28일

vue.js

목록 보기

12/13

1. axios

1-1. axios

axios란? : ajax와 비슷한 기능
cd vue-news > npm i axios --save

1-2. axios에서 this

         .then(
          // this.users하면 안돼요!! users에 접근이 안 돼요!!!
          //response => this.users = response.data 이렇게 하면 안 돼요. 위에서 vm= this 선언해줘야해요!
           response => vm.users = response.data
          //내 생각에는...이 페이지에 속한 div같은 어떤 컴포넌트를 클릭해서 발생하는 function이면 this로 접근이 되는데,
          //axios의 this이므로(어떤 구조물에 속한 속성이 아니어서) this로 접근시 이 페이지를 가르키지 못하는게 아닐까...
          //그냥 axios 자체를 가르킨다!

1-3. 적용

NewsView.vue

<template>
  <div>
    <div>
      <div v-for="user in users"> {{ user }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [] 
    }
  },
  created() {
    var vm = this;
    axios.get('https://api.hnpwa.com/v0/news/1.json')            //만약 'users'라면, localhose:8080/users로 데이터 요청하겠다
         .then(
           response => vm.users = response.data
          )
         .catch() 
  }
}
</script>

1-4. axios를 api로 한데 묶기

src > api 폴더 만들고 index.js 파일 만들기
NewsView.vue

import axios from 'axios';


// 1. HTTP Request&Response와 관련된 기본 설정
const config = {
    baseUrl: 'https://api.hnpwa.com/v0/'
};
// 2. API 함수들을 정리
function fetchNewsList() {
    //return axios.get(config.baseUrl + 'news/1.json');
    return axios.get(`${config.baseUrl} news/1.json`);          //ES6를 이용한 get호출
}

export {
    fetchNewsList
}

1-5. axios를 api로 호출하기

NewsView.vue

<script>
import axios from 'axios';
import { fetchNewsList } from '../api/index.js';

export default {
  data() {
    return {
      users: [] 
    }
  },
  created() {
    var vm = this;
    fetchNewsList()  
      .then(
        response => vm.users = response.data
      )
      .catch() 
  }
}

2. JobsView와 AskView 구현

JobsView

<template>
  <div>
    j<div v-for="job in jobs">{{ job.title }}</div>
  </div>
</template>

<script>
import { fetchJobsList } from '../api/index.js'
export default {

  data() {
    return {
      jobs: []
    }
  },
  created() {
    var vm = this;
    fetchJobsList()
    .then( response => 
      vm.jobs = response.data
    )
    .catch(
      console.log('fetchJobsList 실패')
    )
  }
}
</script>

<style>

</style>

AskView

<template>
  <div>
    <div v-for="item in ask"> {{  item.title  }}</div>
  </div>
</template>

<script>
import { fetchAskList  } from '../api/index.js'
export default {

  data() {
    return {
      ask: []
    }
  },
  created() {
    var vm = this;
    fetchAskList()
    .then( response => vm.ask = response.data
    )
    .catch(
    
    );
  }
}
</script>

3. this

첫번째 sum함수는 this로 찍으면 window객체가 찍히는데((캡처에는 안 나옴))
아래 생성자 함수는 this로 찍으면 해당 생성자 함수(자기자신)이 찍힘

4. Callback 함수

캡틴판교 Callback 설명
자바스크립트 비동기 함수는

1 > 3 > 2 순으로 console에 찍힘. 중간에 딜레이도 발생함.
ajax 요청이 가고, 데이터를 받아오는게 성공할 떄 까지 기다리지않고 바로 3번으로 실행되는게 비동기 함수의 특성입니다.
이 문제 때문에(sucess됐을 때만 실행되면 좋겠는데...그래서) Promise가 등장합니다.