Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript: How do I import and export async functions?

I am creating a weather app using front end only (HTML, CSS, and JavaScript) using NWS (National Weather Service) API, Google JavaScript Library API, Google Places API, and Google Geocoding API. I have created two async functions getCoordinates(region), and getWeatherData(latitude, longitude)

The entire program works without imports and exports. However, when I try to import and export the functions, it doesn’t work. I am getting an error message

Uncaught (in promise) InvalidValueError…

with the Google JavaScript API library I am loading in the /html file where I use loading=async in the URL. However, I have no problem with without imports and exports.

In the .html file, I changed from

<script type="type/javascript" src="index.js"></script>

to

<script type="module" src="index.js"></script>

I have not changed the Google JavaScript URL that I load as async defer .js file as the last line before body tag finishes.

Imports in index.js:

import getCoordinates from './location.js';
import { getWeatherData } from './weather.js';

Exports in location.js:

export default async function getDefault(region) { //code here }

Exports in weather.js

export async function getWeatherData(latitude, longitude) { //code here }
Tags:

2

Answers


  1. 0

    First of all, make the simple function an arrow function

    export const getDefault = async (region) => {
// Your code here

    }
    and

    export const getWeatherData = async (latitude, longitude) => {
// Your code here

    }

    If getDefault and getWeatherData are not default exports from their respective files, you should use curly braces when importing them.

    import { getDefault } from "your file path";
import { getWeatherData } from "your file path";

    However, if these functions are default exports, you would import them without curly braces:

    import getDefault from "your file path";
import getWeatherData from "your file path";

    I hope this will help you.

    Login or Signup to reply.
  2. 0

    For problems that are most likely to come up while working on JavaScript ES modules, precisely during the execution of async functions, there is an order that might go wrong, especially if you are using third-party libraries, such as Google APIs. Here is how to implement this entire flow for importing and exporting async functions correctly so all your scripts work as expected:

    1. HTML File:

       <!-- Load Google Libraries -->
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

 <!-- Load your main script as a module -->
 <script type="module" src="index.js"></script>

    2. Index.js

       import getCoordinates from './location.js';
 import { getWeatherData } from './weather.js';

 (async () => {
     try {
         const region = 'some region';
         const coordinates = await getCoordinates(region);
         const weatherData = await getWeatherData(coordinates.latitude, coordinates.longitude);
         console.log(weatherData);
     } catch (error) {
         console.error('Error fetching data:', error);
     }
 })();

    3. Location.js

       export default async function getCoordinates(region) {
 // ......
     const response = await fetch(`https://api.example.com/coordinates?region=${region}`);
     const data = await response.json();
     return { latitude: data.latitude, longitude: data.longitude };
 }

    4. Weather.js

       export async function getWeatherData(latitude, longitude) {
     // ...
     const response = await fetch(`https://api.weather.com/data? 
     lat=${latitude}&lon=${longitude}`);
     const data = await response.json();
     return data;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search