GET 400 和 Uncaught (in promise) 错误：请求失败，状态码为 400答案

【问题标题】：GET 400 and Uncaught (in promise) Error: Request failed with status code 400GET 400 和 Uncaught (in promise) 错误：请求失败，状态码为 400
【发布时间】：2021-09-15 04:20:15
【问题描述】：

即使我检查了 if(e.target.value === "")，但当 textarea 为空时，它会报错。

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


};

文本区域：

<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>

错误：

获得 400

未捕获（承诺中）错误：请求失败，状态码为 400

【问题讨论】：

您可能以错误的方式调用您的 API 端点。见developer.mozilla.org/en-US/docs/Web/HTTP/Status/400
当 textarea 不为空时，它不会给出错误并运行。
查看您的代码很难判断 textarea 中的值如何影响 API 调用。您的 API 端点是依赖于 textarea 中的值还是纯字符串。我认为您需要添加更多细节，以获得更好的响应。
但是无论目标值是否为空，您每次都在调用您的 API。
我正在使用 yandex 翻译 api。它取决于 textarea 中的值。

标签： javascript json reactjs api axios

【解决方案1】：

您的新编辑说明了这一点。您不能发送带有空文本参数的 API 调用。这就是为什么只有在这种情况下才会出现错误。

仅当您的文本区域中有一些值时才调用它。

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


};

提示：在代码中直接使用 API 调用之前，请尝试使用 Postman/cURL 之类的工具测试它们，或者甚至只是在浏览器中打开 url（如果可能的话）。

【讨论】：