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

Answer 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
    );
  }
}

Answer 2

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.