Why my fetch api return {"_U": 0, "_V": 0, "_W": null, "_X": null}?

Question

How can I return the value in API to a function in React Native

Here is my code

getTime = async (lat1, lng1, lat2, lng2) => {
        let URL = 'https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins='+lat1+','+lng1+'&destinations='+lat2+'%2C'+lng2+'&key=' + GOOGLE_MAPS_APIKEY;
    
        let response =  await fetch(URL)
        let responseJson = await response.json()
        return responseJson
        
    }

Here is the function I try to call it

callTime = () => {
        let a = await this.getTime(lat1, lng1, lat2, lng2)
            .then(response => response.rows[0].elements[0].duration.value)
        return a
    }

When I try to console.log callTime, the value is {"_U": 0, "_V": 0, "_W": null, "_X": null}

I have try with fetch API always returns {"_U": 0, "_V": 0, "_W": null, "_X": null} and LOG {"_U": 0, "_V": 0, "_W": null, "_X": null} inside fetch API but it's not work for me

Hope someone can help me with this problem, it's for my final task in college

when u use `await` you should avoid using `.then()` and `.catch()` in your promise. — Sysix, Jul 14 '21 at 19:13
The opposite. `await` will either return him the desired value from the Promise or throw an error, which will stop the execution of the function. The way to catch errors when using `await` is by wrapping it with a [try-catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block. — avi12, Jul 14 '21 at 19:17
You can use `.catch(err=>...code)` too when using `await`, instead of a `catch` block. This helps if one has multiple `fetch` inside 1 `try` block and one has different error handlers for different errors. — A Rogue Otaku, Jul 14 '21 at 19:21
Remove the braces around `{response.rows[0].elements[0].duration.value}` so that it returns your value. You might as well remove the `async` from `callTime` and just have `callTime = () => this.getTime(lat1, lng1, lat2, lng2).then(r => r.rows[0].elements[0].duration.value)` — Phil, Jul 15 '21 at 00:29
@Sysix thank u for the advice, can you give me an example how to use await beside using .then() and .catch()? I'm new at this field, I'm sorry before — Andre Winarta, Jul 15 '21 at 04:11
@avi12 I've tried using try-catch block but it's just the same, it return {“_U”: 0, “_V”: 0, “_W”: null, “_X”: null} — Andre Winarta, Jul 15 '21 at 04:13
@AmitDas I've tried this too, but it keep return {“_U”: 0, “_V”: 0, “_W”: null, “_X”: null} — Andre Winarta, Jul 15 '21 at 04:14
Your current code won't work since `callTime` is not `async` so `await` is invalid within it. I suggest you read my previous comment again. Also, please show exactly what your _"console.log callTime"_ code looks like. I suspect this **does** answer your question. [fetch API always returns {“_U”: 0, “_V”: 0, “_W”: null, “_X”: null}](https://stackoverflow.com/questions/64906396/fetch-api-always-returns-u-0-v-0-w-null-x-null) — Phil, Jul 15 '21 at 04:44
@Phil sorry sir, I forgot to delete await line, it keep not working, for my console.log, it's in render return, like this `{ console.log(this.callTime()) }` — Andre Winarta, Jul 15 '21 at 04:52
@Phil if you need full render code, I can add it to my question — Andre Winarta, Jul 15 '21 at 04:53
I've closed this as a duplicate since it is exactly the same issue you linked in your question. `this.callTime()` returns a promise and that is what you're logging. Perhaps you want `this.callTime().then(console.log)` instead — Phil, Jul 15 '21 at 04:57

Why my fetch api return {"_U": 0, "_V": 0, "_W": null, "_X": null}?

0 Answers0