Как вернуть данные JSON после 400 неверных запросов

Question

У меня есть запрос Ajax, который я делаю в своем REST API после того, как пользователь вводит неверные данные формы, например: неверное имя пользователя, пустой адрес электронной почты и т. Д. Возвращаемые данные выглядят так:

HTTP 400 Bad Request
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept
{
    "username": [
        "Username already taken."
    ],
    "email": [
        "This field may not be blank."
    ],
    "password1": [
        "This field may not be blank."
    ],
    "password2": [
        "This field may not be blank."
    ]
}

Вот мой код:

console.log(send_data(register_url, data));

function send_data(url, data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
        },

        error: function (xhr) {
        }
    });
}

Когда я вызываю функцию, я получаю все данные. Вот так:

abort: ƒ (e)
always: ƒ ()
catch: ƒ (e)
done: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ (e)
overrideMimeType: ƒ (e)
pipe: ƒ ()
progress: ƒ ()
promise: ƒ (e)
readyState: 4
responseJSON: {email: Array(1), password1: Array(1), password2: Array(1)}
responseText: "{"email":["This field is required."],"password1":["This field is required."],"password2":["This field is required."]}"
setRequestHeader: ƒ (e,t)
state: ƒ ()
status: 400
statusCode: ƒ (e)
statusText: "Bad Request"
then: ƒ (t,r,i)
__proto__: Object

Однако, когда я делаю это:

let resp = send_data(register_url, data);
console.log(resp.responseJSON);

Я получаю undefined, когда в моей консоли JavaScript. Это почему? Почему я не могу получить данные в responseJSON?

Answer 1

$.ajax является асинхронным или не ожидает завершения для продолжения следующей операции, поэтому вы получаете undefined для console.log(resp.responseJSON);

вам нужна функция обратного вызова

function send_data(url, data, callback) {
  return $.ajax({
    url: url,
    type: 'POST',
    data: data,
    success: callback,
    error: callback
  });
}

function ajaxCallback(data, status, jqXHR) {
  //if (status == "success") {}
  //else {}
  resp = jqXHR;
  console.log(resp.responseJSON);
}

let resp;
send_data(register_url, data, ajaxCallback);

Answer 2

Чтобы показать ваши данные, используйте только обратные вызовы, указанные в ajax, success или error, никаким другим способом. Конечно, вы можете использовать функции Promises или async task es 7, но я вижу, что вы полагаетесь на jquery lib.

function send_data(url, data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
           console.log('received data', data);
        },
        error: function (xhr) {
         console.log('Error occured, proceed with some logic')
        }
    });
}

У вас создается неправильное впечатление, что вы получаете какой-то результат, тогда как вы получаете результат объекта ajax, поскольку вы его возвращаете. Вы просто получаете все его функции и свойства, поскольку это сложный объект.

send_data(url, data) {
    return $.ajax({})
}