CODEWITHSUNDEEP
javascriptpromise
mrpowergage
mrpowergage

Reputation: 81

How to use promises properly to return an array at the end of a function?

I'm calling a function with the intention that it returns a result after doing the API call. But it's returning a result the beginning. What am I doing wrong, and how do I fix it?

(The rest of the function runs fine, and gives me the result in the console, but I can't get it to pass it back.

I know that it's got something to do with the way I'm using promises, but I've spent hours reading about them, and haven't get my understanding there yet. So am turning to you guys.)

The function:

export function previewStannpSingleCard(card) {
  var requestOptions = {...}
  getSecret("stannp_API")
    .then((secret) => {

        fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
            .then(response => response.json())
                .then(function (result) {
                console.log("json: " + result)
                console.log("pdf: " + result.data.pdf)
                return (result) 
            })

            .catch(error => console.log('error', error));
    })
}

This is how I'm calling the function:

export async function preview_click(event) {

let results = await wixData.get("UserCard", "ec9b2675-8b24-446b-a0f9-fc0246a3f35f")
        let preview = await previewStannpSingleCard(results)
        console.log("pdf to use next: " + preview.data.pdf);
        }

Upvotes: 0

Views: 66

Answers (3)

Abhishek Sharma
Abhishek Sharma

Reputation: 3290

Seeing the code, you are not returning anything from the previewStannpSingleCard function. The return (result) will return the value to the callback function of then block in fetch call. You need to propagate the return values to the parent and then return the promise i.e. getSecret : Something like this : 

export function previewStannpSingleCard(card) {
  var requestOptions = {...}
  return getSecret("stannp_API")
    .then((secret) => {
        return fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
            .then(response => response.json())
                .then(function (result) {
                console.log("json: " + result)
                console.log("pdf: " + result.data.pdf)
                return (result) 
            })
            .catch(error => console.log('error', error));
    })
}

Upvotes: 0

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

You have forgotten to return the result of the chained promise from the previewStannpSingleCard function.

You can refactor the function previewStannpSingleCard to an async function to make it look more scynchronous by using try/catch and await

The async function will also return the result wrapped in a promise so you can await on the previewStannpSingleCard call:

export async function previewStannpSingleCard(card) {
  const requestOptions = {};
  try {
    const secret = await getSecret("stannp_API");
    const response = await fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions);
    const result = await response.json();
    console.log("json: " + result)
    console.log("pdf: " + result.data.pdf)
    return result;
  } catch (error) {
    console.error('error', error);
    throw error;
  }
}

Upvotes: 2

emrhzc
emrhzc

Reputation: 1480

you need to define the previewStannpSingleCard as async (export async function previewStannSingleCard) and put await before getSecret(...).then(...).fetch(...) so it can wait till returning. for a simpler solution; you can pass a callback to set the preview; 

export function previewStannpSingleCard(card, callback) {
  var requestOptions = {...}
  getSecret("stannp_API")
   .then((secret) => {
    fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
        .then(response => response.json())
            .then(function (result) {
            console.log("json: " + result)
            console.log("pdf: " + result.data.pdf)
            //return (result) remove this
            callback(result)
        })

        .catch(error => console.log('error', error));
    })
}

which then would be called as;

 export async function preview_click(event) {

    let results = await wixData.get("UserCard", "ec9b2675-8b24-446b-a0f9-fc0246a3f35f")
    previewStannpSingleCard(results, function(result){
         preview = result;
    })
    console.log("pdf to use next: " + preview.data.pdf);
 }

Upvotes: 0

Related Questions