1

i want that the two functions with await keyword executes first then the alert() and location.reload should be executed.

 async function CompleteUpload(){
            await LoadValues();
            await UploaderMethod();
            alert("Product Added Successfully!");
            location.reload();
        }

the alert just pops before the 2 await function calls and also the page gets reloaded before these methods are executed.

async function LoadValues(){
        prName = document.getElementById('NAMEbox').value;
        proc = document.getElementById('PROCbox').value;
    }

async function UploaderMethod(){
        var uploadTask = firebase.storage().ref("Laptops/Img" + id+".png").put(files[0]);
            
        uploadTask.on('state_changed', function(snapshot){
          }, .... //firebase upload data function

the upload CompleteUpload() works perfectly if i don't put alert() and reload at the end.

UPDATED** (after someone answered about returning a promise)

at the end of upload task i wrote this:

        return new Promise(function(resolve, reject) {
        resolve("yeah");
    }

changed the complete upload to:

function CompleteUpload(){
            LoadValues();
            UploaderMethod().then(Reeeload());
        }

function Reeeload(){
            alert("Product Added Successfully!");
            location.reload();
        }
Hassaan Raza
  • 187
  • 3
  • 12
  • I think the problem is, that the `UploaderMethod` returns too early. You probably want to return a Promise and call the resolve method on upload finish. From the part I see, I'd guess it returns after making the upload call, not waiting for the upload to finish – A_A Sep 30 '20 at 17:52
  • the upload does not get started before i click ok on the alert method, although it reloaded because i have put it there. – Hassaan Raza Sep 30 '20 at 17:54

3 Answers3

1

This has absolutely nothing to do with the alert.

Your UploaderMethod is defined as async so it always returns a promise, but that promise resolves before the uploadTask is complete (so it continues to the next statement (the alert followed by the reload) immediately).

You should:

  • Remove the async keyword from it (because it isn't awaiting any promises)
  • Return a promise created with the Promise constructor
  • Resolve that promise inside the state_changed event handler (when everything is resolved).

See How do I convert an existing callback API to promises?.

Aside: LoadValues does nothing except entirely synchronous DOM accesses. It shouldn't be marked as async and you shouldn't await the result.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • i updated my question, either i'm returning the promise wrong, or its not working. – Hassaan Raza Sep 30 '20 at 18:33
  • Completely wrong. Either the promise isn't returned from the `UploaderMethod` function or the `resolve` isn't inside the `state_changed` event handler. Take another look at the other question I referenced. – Quentin Sep 30 '20 at 18:34
  • take a look at this https://codepen.io/TACV/pen/Rwamzaz?editors=0010, its my full UploaderMethod. i have put the promise write after completing the data.set() method and it is within the uploadtask functions. – Hassaan Raza Sep 30 '20 at 18:55
  • Your promise has nothing to do with when state_changed event. Look at the question I referenced for examples. – Quentin Sep 30 '20 at 19:19
  • ok i have tried my best to understand how promise works https://codepen.io/TACV/pen/Rwamzaz?editors=0010 but now i'm having two problem, (1) same as before alert is still firing first (2) the promise executes as soon as the page loads. – Hassaan Raza Oct 01 '20 at 05:20
  • `UploaderMethod` needs to be a function that returns a promise, not a promise you create immediately. – Quentin Oct 01 '20 at 09:44
0

Is it specifically alert() that doesn't work with async/await? What if you replace the alert() and location.reload() lines with something like console.log to see if that executes first as well.

It might be your LoadValues() and UploaderMethod() causing the problems.

dwosk
  • 1,202
  • 8
  • 11
  • both alert and then location reload happens, before the two methods, how can they be causing probelm when they run perfectly fine when i remove alert and reload. – Hassaan Raza Sep 30 '20 at 17:56
  • alert and location reload should work fine within an async function so I suspect the issue is with your other two functions - likely `UploaderMethod()` – dwosk Sep 30 '20 at 18:02
  • `alert` interrupts code execution on the page and reload also cancels code execution. So if your `UploaderMethod` isn't finished yet it will get cancelled. To wait for the method to finish, see Quentin's answer – A_A Sep 30 '20 at 18:03
  • Yeah I agree, just meant they should both execute after those other two functions. Quentin's answer should get you what you want. – dwosk Sep 30 '20 at 18:09
0

await won’t work in the top-level code

so intead of function(){ } use this ()=>{} and it will work i made the screenshot from this site. i hade the same trouble (https://javascript.info/async-await)enter image description here

user15775583
  • 1