CODEWITHSUNDEEP
javascript
NeoSoul
NeoSoul

Reputation: 122

Async/Await on Axios

So this is not a technical problem, but more the fundamental question.

async getBestServer() {
      await axios
        .get("https://api.gofile.io/getServer")
        .then((response) => {
          (this.server = response.data.data.server);
          console.log("on axios = " + this.server);
        })
        .catch((error) => console.log(error));
      console.log("on data = " + this.server);
    },

I tried to get a request on this go file api (its public so its ok), then i wanna store it on my data object, what i confuse here is what is actually async/await does in this function? what i know is await will wait for axios to settle the response to the data, then run the second console log below, but what if i dont use await, why the javascript cant wait for axios to settle the data first? i mean isnt that how synchronus works right?

I appreciate if you give me a simple explanation, not just answer with redirect to an article because I've read lot of them but still confuse with this function I made.

Thanks.

Upvotes: 0

Views: 3774

Answers (2)

Mario Vernari
Mario Vernari

Reputation: 7304

The async/await pattern is a much-readable yet error-proof alternative to the then/catch you've used.

Basically, instead of writing:

getBestServer() {
  axios
    .get("https://api.gofile.io/getServer")
    .then((response) => {
      (this.server = response.data.data.server);
      console.log("on axios = " + this.server);
    })
    .catch((error) => console.log(error));
  console.log("on data = " + this.server);
}

You can do the same thing with async/await, but in a imperative-like way:

async getBestServer() {
  try {
    const response = await axios.get("https://api.gofile.io/getServer");
    this.server = response.data.data.server;
    console.log("on axios = " + this.server);
  }
  catch (error) {
    console.log(error)
  }
}

As you can see, in the first snippet the last console.log will be executed immediately as the get is raised. However, since the HTTP request would take a while (respect to the script execution), it becomes confusing to "wait" until the actual data has been received.

In the second snippet, the magic-await does this "wait" for you. Much easier to maintain, much easier to understand what the code does, yet way less error due to dirty code.

The clarity of the difference becomes even greater if you need to cascade two or three calls.

The old-fashion code would look like:

getBestServer() {
  axios
    .get("https://api.gofile.io/getServer")
    .then((response1) => {
      (this.server = response1.data.data.server);
      console.log("on axios = " + this.server);
      
      axios.get("https://another-service")
        .then(response2 => {
          console.log("second call served...")
        })
        .catch(error => console.log(error))
    })
    .catch((error) => console.log(error));
}

Pretty messy, isn't it?

However, you can take advantage of async/await, so that would become:

async getBestServer() {
  try {
    const response1 = await axios.get("https://api.gofile.io/getServer");
    this.server = response.data.data.server;
    console.log("on axios = " + this.server);

    const response2 = await axios.get("https://another-service");
    console.log("second call served...")
  }
  catch (error) {
    console.log(error)
  }
}

Bonus: a single error catch without any effort!

Upvotes: 3

saba silagadze
saba silagadze

Reputation: 46

Javascript is asynchronous single threaded, whenever you send request to server, it has to wait, first to get to server and then to get answer from server, and making that single thread to wait will pause whole process. So in order to minimize wasted time on waiting, Javascript moves to do other things before response gets back. But there will be situations where you need to wait for something, in that situation by marking api call with await Javascript knows that first it needs to wait for response and then move to next step in that function.

Upvotes: 0

Related Questions