Может ли fetch заменить AJAX? - PullRequest
Новая
       8

Может ли fetch заменить AJAX?

0 голосов
/ 09 января 2019

Мне интересно, можно ли сделать все, что вы можете сделать в традиционном ajax? Потому что у меня проблема с простой аутентификацией входа в систему с использованием экспресс. Я хочу отправить ответ, например, «Ошибка входа в систему», если имя пользователя / пароль указаны неверно, или перенаправить пользователя на домашнюю страницу, если оба значения указаны правильно, клиенту без обновления страницы.

Я понимаю, что вы можете сделать это в AJAX, но возможно ли это сделать и в fetch?

Я пытался использовать Express JS и отправлять ответ через JSON, но я не могу понять, как обработать ответ без обновления страницы.

Я пытался сделать это на экспресс-сервере 

//if valid
res.json({
    isValid: true
})

//if invalid
res.json({
    isValid: false
})

А на стороне клиента, в частности на странице входа, у меня есть этот javascript, который обрабатывает отправку информации 

fetch('https://localhost:3000/auth', {
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        username,
        password
    })
})
.then(response => response.json())
.then(data => {
     //I understand that in this part, you can handle the response, but the problem is, I don't know how.
    }
})
.catch(console.log)

1 Ответ

0 голосов
/ 09 января 2019

Ты ТАК близко! У вас есть выборка, затем вы проанализировали ее с помощью response.json, поэтому следующая вещь - .then (). При этом объект JSON передается в параметр с именем data. Все, что вам нужно сделать, это проверить, имеет ли оно свойство isValid! 

fetch('https://localhost:3000/auth', {
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        username,
        password
    })
})
.then(response => response.json())
.then(data => {
     if(data.isValid){
       // Do something with a valid user. Redirect or whatever.
     } else {
       // Here, isValid is not set, or is false.
       //  Send them packing!
     }
    }
})
.catch(err => console.error("I died: ", err) );

ТАКЖЕ, взгляните на блок .catch() - в случае ошибки, которая ловит ошибку, выданную либо fetch(), либо then(). Поэтому вам нужно добавить параметр для ошибки и тело функции для ее обработки. Я отредактировал пример кода для демонстрации.

На самом деле здесь работать не будет, но все отформатировано.

...