javascript - Vuejs 从 .js 文件返回数据

Question

我是 Vue 的新手，正在开发一个从天气 API 获取天气的应用程序。
如果我将 axios.get() 留在 Content.vue 中，下面的代码就可以正常工作。
我想将它移动到一个单独的文件 (WeatherAPI.js) 并从那里调用它。如果我注释掉 axois.get() 调用 Content.vue 并取消注释 this.todaysWeather = WeatherAPI.returnTodaysWeather(); 它不会不工作。我确实看到数据从 WeatherAPI.js 记录到控制台，所以它正在获取它，但它似乎没有正确返回它。我在 Content.vue 的控制台日志中看到 undefined。

内容.vue

<template>
<div class="container-fluid">
    <div class="row answerRow text-center">
        <div class="col">
        </div>
    </div>
    <div class="row">
        <div class="col">
            <weather-today :todaysWeather="todaysWeather"></weather-today>
        </div>
        <div class="col">
            Column2
        </div>
    </div>
</div>
</template>

<script>
import Today from '../weather/Today.vue'
import WeatherAPI from '../data/WeatherAPI.js'
import axios from 'axios'
const apiURL = "http://api.openweathermap.org/data/2.5/weather";
const apiKey = "MyKeyHere";
const zipCode = "11111,us";
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey;
export default {
    mounted(){
        this.getTodaysWeather();
        console.log(this.todaysWeather)
    },
    data () {
        return {
            todaysWeather: {name: "testname"}
        }
    },
    components: {
        'weather-today': Today
    },
    methods: {
        getTodaysWeather () {
            //this.todaysWeather = WeatherAPI.returnTodaysWeather();            
            axios.get(dailyWeatherUrl)
                .then((response) => {
                    console.log(response.data);
                    this.todaysWeather = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });


        }
    }
}
</script>

<style>
.answerRow{
    background-color: yellow;
}
</style>

今天.vue

<template>
    <div class="container row1">
        <div class="row">
            <div class="col">
                <h2>Todays Weather</h2>
            </div>
        </div>            
        <div class="row">
            <div class="col">
                City: {{ todaysWeather.name }}
            </div>
        </div>   
    </div>
</template>

<script>
import WeatherAPI from '../data/WeatherAPI.js'
export default {
    props: ['todaysWeather'],
    mounted() {
        console.log(this.todaysWeather)
    }    
}
</script>

<style>
.row1{
    background-color: #3498DB;
}
</style>

WeatherAPI.js

const apiURL = "http://api.openweathermap.org/data/2.5/weather";
const apiKey = "MyKeyHere";
const zipCode = "11111,us";
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey;

import axios from 'axios';
export default {   
  data(){
    return {
      todaysWeather: {}
    }
  },
    returnTodaysWeather () {
        axios.get(dailyWeatherUrl)
        .then((response) => {
          console.log(response.data);
          this.todaysWeather = response.data;
          console.log(this.todaysWeather);
          return this.todaysWeather;
        })
        .catch(function (error) {
          console.log(error);
        });
    }


}

Answer 1

您的 WeatherAPI.js 文件实际上不应该与 Vue 有任何关系，它应该只是一个包含与天气 API 交互的方法的文件。

WeatherAPI.js

const apiURL = "http://api.openweathermap.org/data/2.5/weather";
const apiKey = "MyKeyHere";
const zipCode = "11111,us";
const dailyWeatherUrl = apiURL + "?zip=" + zipCode + "&appid=" + apiKey;

import axios from 'axios';

export function returnTodaysWeather () {
  return axios.get(dailyWeatherUrl)
           .then(response => response.data)
}

请注意，此函数返回一个 promise 。我们稍后会用到它。此外，此代码直接导出函数。如果您愿意，您可以导出一个对象，该对象具有以不同方式与 API 交互的多个函数。

现在在 Content.vue 中，您需要做的就是导入您要使用的天气 API。

Content.vue

// import the returnTodaysWeather function from the api file
import { returnTodaysWeather } from '../data/WeatherAPI.js'

export default {
    mounted(){
        this.getTodaysWeather();
        console.log(this.todaysWeather)
    },
    data () {
        return {
            todaysWeather: {name: "testname"}
        }
    },
    components: {
        'weather-today': Today
    },
    methods: {
        getTodaysWeather () {
            // The API returns a promise. In the callback from the 
            // promise, we can set the Vue's data with the results
            // of the call to the API
            returnTodaysWeather().then(weather => this.todaysWeather = weather)           
        }
    }
}

我删除了错误处理，但在生产中您显然希望从 API 中捕获错误。