Vue.js로 API에 액세스하는 방법?

자바 스크립트와 Vue.js를 처음 사용하며 Vue.js를 사용하여 API에 액세스하는 데 문제가 있습니다. 내가 접근에 노력하고있어 API는 다음과 같습니다 JSON이 있습니다Vue.js로 API에 액세스하는 방법?

{ 
    "coord": { 
     "lon": -88.99, 
     "lat": 40.51 
    }, 
    "weather": [ 
     { 
      "id": 800, 
      "main": "Clear", 
      "description": "clear sky", 
      "icon": "01n" 
     } 
    ], 
    "base": "stations", 
    "main": { 
     "temp": 2.09, 
     "pressure": 1022.3, 
     "humidity": 69, 
     "temp_min": 2.09, 
     "temp_max": 2.09, 
     "sea_level": 1052.03, 
     "grnd_level": 1022.3 
    }, 
    "wind": { 
     "speed": 12.66, 
     "deg": 205.502 
    }, 
    "clouds": { 
     "all": 0 
    }, 
    "dt": 1482203059, 
    "sys": { 
     "message": 0.186, 
     "country": "US", 
     "sunrise": 1482239741, 
     "sunset": 1482273134 
    }, 
    "id": 4903780, 
    "name": "Normal", 
    "cod": 200 
}

그것의 자신의 작품에 API 링크,하지만 난이 프로그램을 실행할 때 나는 그것을 접근 있다고 생각하지 않습니다. JSON을 구문 분석하지 않고 api에서 수집 한 모든 데이터를 표시 할 때도 내 변수는 여전히 비어 있습니다. 그래서 나는 api에 접근하기 위해 뭔가 잘못하고있을 것입니다. 또한, API에 액세스 한 후,이 작품처럼 구문 분석됩니다 : 예를 들어, 태그 "온도"에 접근을 => "data.main.temp"

var weather = new Vue({ 
     el: '#weather', 

     data: { 
      getTemp: '' 
     }, 

     created: function() { 
      this.fetchData(); 
     },   

     methods: { 
      fetchData: function() { 
       this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'), 
        function (data) { 
         this.getTemp = data.main.temp; 
        } 
      } 
     } 

    }) 
    ;

HTML 코드 :

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script> 
</head> 

<body> 
<div id="weather"> 
    {{getTemp}} 
</div> <!--end of weather--> 
</body> 

<script src="app.js"></script> 

</html>

출처

2016-12-20 thefreebird777

내가 $http.get 내부, 블랙 this 변경의 범위를 this의 범위의 문제를 참조하십시오, 당신은 다음과 같이 변경해야합니다

methods: { 
     fetchData: function() { 
      var vm = this 
      this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'), 
       function (data) { 
        vm.getTemp = data.main.temp; 
       } 
     } 
    }

내 비슷한 대답 here을 확인할 수도 있습니다.

출처

2016-12-20 03:35:02 Saurabh

감사를 가고 싶습니다하지만 나중에 나에게 문제가 발생했을 것입니다. – thefreebird777

@ thefreebird777 $ http 호출에서 로그 데이터를 콘솔링하는 경우 API에서 데이터를 가져오고 있습니까? – Saurabh

아니요, 아닙니다. 그러나 내 주소 표시 줄에 API URL을 넣으면 제대로 작동하므로 링크가 좋습니다. – thefreebird777

나는 여전히 작동하지 않는 코드에서, 여기 약속, 그리고 몇 가지 다른 조정을

var weather = new Vue({ 
     el: '#weather', 

     data: { 
      getTemp: [] 
     }, 

     created: function() { 
      this.fetchData(); 
     },   

     methods: { 
      fetchData: function() { 
       this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID') 
          .then(response => { 
          this.getTemp = response.data 
          // or like this this.getTemp = response.json() 
          }) 
      } 
     } 

    }) 
    ;

출처

2016-12-20 08:21:42

'this.data.getTemp = response.data '? – kiltek

@kiltek 아니, 안된다. –

괜찮아. 마술처럼. 귀하의 버전에 대한 작업을 얻었습니다. – kiltek

Vue.js로 API에 액세스하는 방법?

답변

관련 문제