Getting right fetch result from previous async fetch API functions-CodePudding

Hi I don't understand why getFlyByTime() function is giving me an ERR_INVALID_URL.

All the way upto getFlyByTime() I am getting the right results and coordinates.

Any advice would be appreciated,

Thank you

import fetch from "node-fetch";

let myIP = ''
let myLocation = ''
let flyByInformation = ''

const findIP = 'https://api.ipify.org/?format=json'
const geolocation = 'http://ipwho.is/'
const issFly = `https://iss-pass.herokuapp.com/json?`



const getMyIP = async function() {
    let response = await fetch(findIP);
    let data = await response.json()
    return data.ip
}

 const getMyGeoLocation = async function() {
    let response = await fetch(geolocation   myIP);
    let data = await response.json()
    let resURL = `https://iss-pass.herokuapp.com/lat=${data.latitude}&lon=${data.longitude}`
    return resURL;
 }

 const getFlyByTime = async function() {
    let response = await fetch(myLocation);
    console.log(response)
    let data = await response.json()
    return data;
}

getMyIP()
 .then(data => {
     myIP = data
}).catch(err => console.log('gmi error', err))

getMyGeoLocation()
  .then(data => {
        myLocation = data;
        console.log(myLocation);
}).catch(err => console.log('gml error', err))


getFlyByTime()
  .then(data => {
        flyByInformation = JSON.parse(data);
        console.log('flyby', flyByInformation);
}).catch(err => console.log('gflt error', err))

CodePudding user response：

You are trying to use the myLocation and myIP values BEFORE they have been filled. Your functions return a promise before their work is done. Not until that promise has been fulfilled are the resolved values available for you to use.

As such, you must sequence your operations. It is generally easiest to do this with await. Here's an example shown below:

import fetch from "node-fetch";

const findIpURL = 'https://api.ipify.org/?format=json'
const geolocationURL = 'http://ipwho.is/'
const issFly = `https://iss-pass.herokuapp.com/json?`

async function fetchJSON(url) {
    const response = await fetch(url);
    if (response.ok) {
        return response.json();
    } else {
        throw new Error(`Request failed, status ${response.status}`, { cause: response });
    }
}

async function getMyIP() {
    const data = await fetchJSON(findIpURL);
    return data.ip;
}

function getMyGeoLocation(myIP) {
    return fetchJSON(geolocationURL   myIP);
}

async function getFlyInfo(lat, long) {
    let resURL = `https://iss-pass.herokuapp.com/lat=${lat}&lon=${long}`;
    const flyInfo = await fetchJSON(resURL);
    return flyInfo;
}

async function getFlyByTime() {
    const myIP = await getMyIP();
    console.log(myIP);
    const myLocation = await getMyGeoLocation(myIP)
    console.log(myLocation.latitude, myLocation.longitude);
    return getFlyInfo(myLocation.latitude, myLocation.longitude);
}

getFlyByTime().then(flyInfo => {
    console.log(flyInfo);
}).catch(err => {
    console.log(err);
});

When I run this, the last getFlyInfo() request ends up returning a text/plain response that just says "Not Found" and the status is a 404. So, either the URL isn't being built properly in my version of the code or something is amiss in that last part.

But, hopefully you can see how you sequence asynchronous operations with await in this example and you can make that last part do what you want it to.