React.js 导出异步函数

Question

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

我用 react.js 构建了一个天气 API 应用程序并且它可以运行。我不能做的一件事是导出我的 async function fetchData(e)，这样我就可以从 App.js 范围之外的任何组件访问它。如何导出 async 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

一旦将异步函数与 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
    
    }

Answer 2

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

看看这个 context Api of react js 通过使用这个你可以在你的应用程序的任何组件中获得这个功能，你也可以更新它的值。

Answer 3

尝试如下操作

--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);
       }
   })();
}

React.js 导出异步函数

React.js export async function

weather-api

async-await

reactjs