前端获取http状态码400的返回值实例

当前端在向后端发送请求时，如果后端无法理解请求或请求参数不符合规定，就会返回一个HTTP状态码400（Bad Request）。前端可以通过获取这个状态码及其返回值，来对用户进行提示或者进行其他操作。以下是获取HTTP状态码400返回值的攻略：

获取状态码及返回值

我们可以通过XMLHttpRequest对象的response属性获取HTTP状态码及其返回值。具体代码如下：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 400) {
        let res = JSON.parse(xhr.response);
        console.log(xhr.status, res);
    }
};
xhr.send(JSON.stringify({username: 'example', password: '123456'}));

在上述代码中，我们通过XMLHttpRequest对象的open方法打开POST请求，并设置了请求头部。在onreadystatechange事件中，我们判断了状态码是否为400，并获取了返回值。如果状态码为400，则打印出状态码和返回值。

示例说明

示例1

我们模拟一个登陆的场景。后端接收到的请求需要包含用户名和密码。如果用户没有传递这些请求参数，我们就返回状态码400和错误信息。以下是后端代码：

@app.route('/api/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username') 
    password = data.get('password')
    if not username or not password:
        return jsonify({'error': 'username or password is missing'}), 400
    return jsonify({'success': 'login success'})

在前端中，我们通过上述代码进行请求。如果用户没有传递用户名或密码，后端会返回状态码400和错误信息，前端可以通过这个状态码及其返回值，进行页面提示。以下是前端代码：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 400) {
        let res = JSON.parse(xhr.response);
        alert(res.error);
    }
};
xhr.send(JSON.stringify({}));

在上述代码中，我们通过传递空对象来模拟请求参数缺失的情况。如果后端返回状态码400，则弹出错误提示框，并将错误信息显示出来。

示例2

我们模拟一个表单提交的场景，用户需要填写姓名、电话号码和地址等信息。如果用户没有填写其中的某个信息，后端就会返回状态码400和错误信息。以下是后端代码：

@app.route('/api/submit', methods=['POST'])
def submit():
    data = request.get_json()
    name = data.get('name')
    phone = data.get('phone')
    address = data.get('address')
    if not name or not phone or not address:
        return jsonify({'error': 'name, phone or address is missing'}), 400
    return jsonify({'success': 'submit success'})

在前端中，我们同样利用上述代码进行请求。如果用户没有填写其中的某个信息，后端会返回状态码400和错误信息，前端可以通过这个状态码及其返回值，进行页面提示。以下是前端代码：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 400) {
        let res = JSON.parse(xhr.response);
        alert(res.error);
    }
};
xhr.send(JSON.stringify({name: 'example', phone: '123456'}));

在上述代码中，我们模拟了用户在填写表单信息时，没有填写地址的情况。如果后端返回状态码400，则弹出错误提示框，并将错误信息显示出来。

总结

以上就是获取HTTP状态码400返回值的攻略。我们可以通过XMLHttpRequest对象的response属性，获取HTTP状态码及其返回值。在代码中，我们还给出了两个示例，分别演示了模拟登陆和表单提交的场景。在实际项目中，可以根据自己的需求进行修改和使用。