React.js 导出异步函数

Question

我是 React.js 的新手，所以请多多包涵。

我用 react.js 构建了一个天气 API 应用程序，它可以工作。我不能做的一件事是导出我的async function fetchData(e)，以便我可以从 App.js 范围之外的任何组件访问它。 如何导出异步 fetchData 以便它被 App.js 之外的所有组件识别？ 请注意async function fetchData(e) 函数需要在 App.js 开头声明的所有变量。

出于显而易见的原因，我从代码中排除了我的 API 密钥，并且我没有在 fetchData 函数中包含所有代码，因为它非常冗长。

function App() {
  //Variables
  const API_KEY = '';
  const METRE_SECOND_TO_KM_HR = 3.6;
  const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  const [weather, setWeather] = useState([]);
  const [geolocation, setGeolocation] = useState([]);

  async function fetchData(e) {
    //async function fetchData(e) {
    const city = e.target.elements.city.value;
    const state = e.target.elements.state.value;
    const country = e.target.elements.country.value;

    e.preventDefault();
    //fetch request with city, state and country - to get a latitude and longitude based on city name.
    const geolocation_api_request_url = `https://api.openweathermap.org/geo/1.0/direct?q=${city},${state},${country}&limit=5&appid=${API_KEY}`;
    await fetch(geolocation_api_request_url)
      .then(function (res) {
        return res.json();
      })
      .then(function (data) {
        if (city && state && country) {
          //set the latitude and longitude of the location
          setGeolocation({
            data: data,
            lat: data[0].lat,
            lon: data[0].lon,
          });
          //make a second fetch call, this time with latitude and longitude
          const weather_api_url = `https://api.openweathermap.org/data/2.5/onecall?lat=${geolocation.lat}&lon=${geolocation.lon}&exclude=minutely,hourly&appid=${API_KEY}&units=metric`;
          return fetch(weather_api_url);
        }
      })

Answer 1

尝试如下操作。

-- WeatherAPI.js --

const fetchData = (city, state, country, setGeolocation) => {
    return new Promise(async(resolve, reject)=>{
        const geolocation_api_request_url = `https://api.openweathermap.org/geo/1.0/direct?q=${city},${state},${country}&limit=5&appid=${API_KEY}`;
        try{
            res = await fetch(geolocation_api_request_url);
            if(city && state && country){
                //set the latitude and longitude of the location
                const data = res.json();
                setGeolocation && setGeolocation({
                    data: data,
                    lat: data[0].lat,
                    lon: data[0].lon,
                });
                
                //make a second fetch call, this time with latitude and longitude
                const weather_api_url = `https://api.openweathermap.org/data/2.5/onecall?lat=${geolocation.lat}&lon=${geolocation.lon}&exclude=minutely,hourly&appid=${API_KEY}&units=metric`;
                resolve(await fetch(weather_api_url));
             }
         }catch(e){
             reject(e);
         }
    });
}
export fetchData;

--- App.js ---

import {fetchData} from '../api/WeatherAPI";
...
function fetchDataFromGoogle(e) {
   ...
   (async()=>{
       try{
           const weatherData = await fetchData(city, state, country, setGeolocation);
       }catch(e){
           console.error(e);
       }
   })();
}

Answer 2

https://reactjs.org/docs/context.html#updating-context-from-a-nested-component

看一下 react js 的这个 context Api 通过使用这个你可以在你的应用程序的任何组件中获取这个函数，你也可以更新它的值。

Answer 3

一旦将异步函数与 App 函数分开，您就可以像这样导出异步函数：

export const fetchData = async (args) => {
// Your implementation

}

关于参数，如果都是常量的话，把它们放在一个json对象里面传给函数，因为导出的函数不能访问这些变量：

const args = {
    API_KEY : '',
    METRE_SECOND_TO_KM_HR : 3.6,
    DAYS : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    options : {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
}

并将这个对象作为参数传递给函数：

export const fetchData = async (e, args) => {
    // Your implementation
    
    }