Why I am getting error when calling the API using axios?

Question

I want to call the API and use the API result for further computation But not able to do like this. Even after using async/await. I am getting the console value as undefined.I tried using promise as well but I am not getting how do I give authorization attribute to it. I am naive to js, can anyone help where I am going wrong?

var plan;
async function makeRequest() {

   const config = {
  "url": "https://jsonplaceholder.typicode.com/posts/1",
  "method": "GET",
  "timeout": 0,
  "headers": {
    "Authorization": "[Auth_url]"
  },
};
    let res = await axios(config)

    console.log(res);
    plan = res;
}

makeRequest();
console.log("plan",plan)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

This is not even a problem of async call or not, you are just logging an undeclared variable, before even calling your function. If you logged afterwards (preferably declaring your variable as well - the non-strict voodoo of assigning global variables wouldn't have happened yet for the same reasons), see [how-do-i-return-the-response-from-an-asynchronous-call](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ASDFGerte, Apr 27 '21 at 12:24
Sorry I missed the global variable. But even after using async/await. I am getting the console value as undefined. Can anyone please guide where I am going wrong? I tried using promise aswell but I am not getting how do i give authorization atribute to it — Nidhi, Apr 27 '21 at 12:33
"But even after using async/await" — You **aren't** awaiting `makeRequest();` — Quentin, Apr 27 '21 at 12:37
Refer to the post i linked above, it's now a direct duplicate of it. — ASDFGerte, Apr 27 '21 at 12:37
You aren't using `await` to wait for the promise returned by `makeRequest` to resolve. — Quentin, Apr 27 '21 at 12:42
@ASDFGerte I am little confused with the link you shared..doesnt tell how to use authorization/header attribute aswell — Nidhi, Apr 27 '21 at 12:44
Some amount of transfer is required, yes. It won't be copy-able code for your specific situation. The general problem is, what you need to take in (that the async call isn't finished yet, when you call `console.log`, so `plan` isn't yet assigned, and how to deal with that). It's not about the details, whether the async call is `$.ajax`, or `fetch`, or `makeRequest`, or whatever. — ASDFGerte, Apr 27 '21 at 12:50

Tony Tom · Answer 1 · 2021-05-13T02:52:18.833

1

You can try this way

you can pass the token details in the headers section

var plan= [];
 function makeRequest() {
    axios.get('https://jsonplaceholder.typicode.com/posts/1',      {
  headers: {
    /* 'Authorization': '',*/
  }})
    .then((res) => {
   
    plan = res.data;
    console.log(plan);
    });
}
makeRequest();

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

This approach you can try in the sample snippet set you have provided.

var plan;
async function makeRequest() {
   const config = {
  "url": "https://jsonplaceholder.typicode.com/posts/1",
  "method": "GET",
  "timeout": 0,
  "headers": {
    "Authorization": "[Auth_url]"
  },
};
    let res = await axios(config)
    plan = res.data;
}

makeRequest().then(result => {
console.log("plan",plan)
});

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

edited May 13 '21 at 02:52

answered Apr 27 '21 at 12:52

Tony Tom

1,435
1
10
17

Thanks but then again the issue is same, the console is undefined, I am expecting to get the api response in the plan variable. – Nidhi Apr 27 '21 at 13:09
You: 1) didn't address the core issue at all (rather you just deleted the `console.log` in an edit), 2) changed to a `.then`, which is absolutely unnecessary, inside the original code, and 3) kept the `await`, now mixed with `then` style in the same function, but i'm out, i spent way too much time on the 10000th dupe of the same topic again. People upvote whatever they want anyways. – ASDFGerte Apr 27 '21 at 13:09
Though thanks for your help @ASDFGerte. will try going through that link again – Nidhi Apr 27 '21 at 13:13
@Nidhi, I have updated the answer for your approach, does that clarify your doubt? – Tony Tom May 13 '21 at 03:07

Why I am getting error when calling the API using axios?

1 Answers1