Promise function javascript

[Borhen]

please can someone help me to fix the problem in this function :

 async function getQuote() {
   
   return await fetch('https://type.fit/api/quotes').then(response=> {
   return response.json()
   }).then(jsonResponse=> {
      if(!jsonResponse.length) {
        return
      }
      let indexQuote = Math.floor(Math.random() * jsonResponse.length);
      let quote = jsonResponse[indexQuote]
      return quote
   })

 }
 
 const textQuote =  getQuote().then(response=> console.log(response))
 if(textQuote !== 'undifined') {
    console.log(textQuote.text)
 } 

when i try to execute textQuote.text it return me undifined in the console

[bbsmooth]

It appears that you want the getQuote function to return a randomly selected quote from the API you are calling, but the first thing you are doing in the function body is returning the initial fetch which will return the actual response from the API. You only want to return once you have selected a random quote from the fetch.

Try using the googles to search for “javascript async fetch”. You will find plenty of examples of how to do this properly. Here’s one to get you started.

How to Use Fetch with async/await

[Borhen]

my friend i had already follow this site to do a promise function that return an api but like you had see it don’t work like expecting

[bbsmooth]

The code you initially pasted here is not doing what you want it to do. If you have made changes then please paste your updated code here. If you have not made changes then you need to read up on how to use async with fetch so you can make the proper changes. I already explained that you are returning the wrong thing. The link I gave you explains how to get the information you want using async and fetch. It is now up to you to learn how to do this and make the necessary changes to your code. If you get stuck you can show us your changes and we can help you.

[ilenia]

@Borhen

if(textQuote !== 'undifined')

this is always true, you may want to use the keyword undefined (without the quotes, and check the spelling)

[Borhen]

it’s the same result it’s not work well

[bbsmooth]

My apologies @Borhen, I misread your code and gave you the wrong advice (that will teach me not to actually test it my own browser first).

Your getQuote function is actually working properly, though I do think it can be refactored to be much clearer, especially since you are using an async function so you might as well take advantage of the benefits async provides.

The real issue is that textQuote is not being set to what you think it is being set to. Add the following after the line that initializes textQuote:

console.log('textQuote = ', textQuote);

I think you’ll see the problem. Since getQuote is an async function it always returns a promise.

If you want to work with the return value of getQuote then you’ll need to do it inside the then(), just like you are doing when you console log the response. Or you could create a separate async function which calls getQuote and then you could use await to get the return value of getQuote and use it normally as you would in any other function.

Also, as @ilenia pointed out, you weren’t checking for undefined properly.

[Borhen]

that’s what is displaying in the console :

[Borhen]

thanks my friend for your help i will found the problem where exactly

[Borhen]

no problem thanks for your time and advices my friend. i have follow your instruction " console.log('textQuote = ', textQuote);" and that what i had for result :
textQuote = Promise {}[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): “Promise”[[Prototype]]: Object[[PromiseState]]: “fulfilled”
[[PromiseResult]]: undefined

[bbsmooth]

Exactly, textQuote is being set to the pending promise returned by getQuote, not the quote object that you are returning once the fetch has completed. The getQuote function returns a promise, so you have to handle that promise either using the then() method or by using another async function.