Axios then, catch are not called

Question

In my React front end, I call Axios with post method successfully, in my Python Falcon backend parameters are received successfully and token is generated back, problem is the code in .then or even .catch are never called, here is my front end code:

async submit() {
  //var aluser = this.this.state.username;
  await axios({
    method: "post",
    url: "http://127.0.0.1:8000/Login",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    params: {
      username: this.state.username,
      password: this.state.password
    }
  })
    .catch(error => {
      console.log(
        "here is the error on a post request from the python server  ",
        error
      );
    })
    .then(res => {
      console.log(res);

      sessionStorage.setItem("token", res.data[0]);
    });
}

Note: the order of .then .catch was switched before, same result.

Thanks in advance

It looks like you might have to switch the order of catch and then, check https://stackoverflow.com/questions/42013104/placement-of-catch-before-and-after-then — mfrackowiak, Mar 14 '19 at 08:46
Have you checked the Network tab of your Developer Tools? Maybe `http://127.0.0.1:8000` is a different origin, and you are having CORS issues. — Tholle, Mar 14 '19 at 08:48
Do you generate the right status code when an error occurs? As @mfrackowiak said, you must switch the order of check and then. — Kristiyan Gospodinov, Mar 14 '19 at 08:54
The back end generates code 200 40 and it is captured correctly on Postman and also other vanilla/Jquery JS — Eagle, Mar 14 '19 at 09:21

kkangil · Answer 1 · 2019-03-14T09:48:43.890

1

try to use try/catch

const params = new URLSearchParams();
params.append('username', this.state.username);
params.append('password', this.state.password);

async submit() {
  //var aluser = this.this.state.username;
  try {
    const res = await axios({
      method: "post",
      url: "http://127.0.0.1:8000/Login",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      },
      params
    })

    sessionStorage.setItem("token", res.data[0]);
  } catch (err) {
    console.log(
      "here is the error on a post request from the python server  ",
      error
    );
  }
}

edited Mar 14 '19 at 09:48

answered Mar 14 '19 at 09:30

kkangil

1,616
3
13
27

I tried that code, didn't work neither, but thanks anyway. – Eagle Mar 14 '19 at 09:37
Did you try stringfy data? https://www.npmjs.com/package/axios#browser – kkangil Mar 14 '19 at 09:45
This is my back end Python code:\n res.status = falcon.HTTP_200 \n res.body = json.dumps([token]) – Eagle Mar 14 '19 at 09:47

score 1 · Answer 2 · answered May 11 '22 at 00:36

1

If your backend service is only returning a 200 response, axios will not call "then" because you haven't send response data back. I just sent an "OK" response payload back with my 200 status code. "then" was called as expected.

answered May 11 '22 at 00:36

npn_or_pnp

407
4
10

Axios then, catch are not called

2 Answers2