GET 400 and Uncaught (in promise) Error: Request failed with status code 400

Question

Even though I checked with if(e.target.value === ""), it gives an error when the textarea is empty.

onFirstChange = async (e) => {

const response = await axios.get("https://translate.yandex.net/api/v1.5/tr.json/translate?key=" + key +
    "&text=" +
    e.target.value +
    "&lang=en");

if (e.target.value === "") {
  this.setState({
    firstArea: "",
    lastArea: "",
  });
} else {
  this.setState({
    firstArea: e.target.value,
    lastArea: response.data.text,
  });
}


};

Textareas :

<textarea
            className="form-control"
            id="firstArea"
            name="firstArea"
            rows="5"
            placeholder="Enter"
            defaultValue={this.state.firstArea}
            onKeyUp={this.onFirstChange}
          ></textarea>
<textarea
                className="form-control"
                id="lastArea"
                name="lastArea"
                rows="5"
                placeholder=" "
                defaultValue={this.state.lastArea}
                onKeyUp={this.onLastChange}
              ></textarea>

Errors :

GET 400

Uncaught (in promise) Error: Request failed with status code 400

You probably calling your API endpoint in a wrong way. See developer.mozilla.org/en-US/docs/Web/HTTP/Status/400 — Jirka Svoboda
– Jirka Svoboda, Commented Jul 3, 2021 at 17:04
When textarea is not empty it doesn't give an error and it runs. — furkancetkin
– furkancetkin, Commented Jul 3, 2021 at 17:06
Looking at your code it is hard to tell how the value inside textarea can affect the API call. Is your API endpoint dependent on the value inside textarea or is it a plain string. I think you need to add a few more details, to get a better response. — Tushar Shahi
– Tushar Shahi, Commented Jul 3, 2021 at 17:09
But you are calling your API everytime no matter if target value is empty or not. — Jirka Svoboda
– Jirka Svoboda, Commented Jul 3, 2021 at 17:10
I am using yandex translate api. It dependent on the value inside textarea. — furkancetkin
– furkancetkin, Commented Jul 3, 2021 at 17:17

Tushar Shahi · Accepted Answer · 2021-07-03 19:03:57Z

1

Your new edit makes it clear. You cannot send an API call with empty text parameter. That is why you are getting an error only in that condition.

Call it only when there is some value in your text area.

en though I checked with if(e.target.value === ""), it gives an error when the textarea is empty.

onFirstChange = async (e) => {



if (e.target.value === "") {

  this.setState({
    firstArea: "",
    lastArea: "",
  });
} else{

const response = await axios.get("https://translate.yandex.net/api/v1.5/tr.json/translate?key=" + key +
    "&text=" +
    e.target.value +
    "&lang=en");


  this.setState({
    firstArea: e.target.value,
    lastArea: response.data.text,
  });
}


};

Tip: Before using API calls directly in code, try to tets them using tools like Postman/cURL or even simply opening the url in browser(if possible).

answered Jul 3, 2021 at 19:03

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

GET 400 and Uncaught (in promise) Error: Request failed with status code 400

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related