Как получить доступ к API с Vue.js?

Я новичок в JavaScript и Vue.js, и у меня возникли проблемы с доступом к api с помощью Vue.js. API Я пытаюсь получить доступ есть JSON, который выглядит следующим образом:Как получить доступ к API с Vue.js?

{ 
    "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

Я вижу проблему с рамкой this, объемом this изменений внутри $http.get черным, вам необходимо сделать следующие изменения:

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 Получаете ли вы данные из API, если вы скопируете данные журнала в $ http call? – Saurabh

нет, я нет. Но если я положу URL-адрес API в свою адресную строку, он работает, поэтому ссылка хороша. – 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 nope, он не должен –

нормально, он фигурирует сам, магически. Получил его работу с вашей версией. – kiltek

Как получить доступ к API с Vue.js?

ответ

Смежные вопросы