Моя функция возвращаемого значения не работает

Question

Проблема Я работаю над простой страницей входа.Из моего скрипта модели представления я вызываю другой скрипт, который обрабатывает вызовы моего API.

Короче говоря, я не получаю ожидаемые данные, которые я хочу, это просто строка токена (которая указывает логинбыл успешным).

Вот макет Json, который я использую

[
    {
      "id":1,
      "firstName":"John",
      "lastName":"Smith",
      "email":"john@gmail.com",
      "token" : "65456j4h56j4h6gjk4g6k7g6k5g7jh567"
    }
  ]

My View Model Script

import {user} from "../shared/user-service.js";
import {token} from "../shared/token-service.js";


// Login View Model
var LoginViewModel = function () {

    self = this;

    this.token = ko.observable();
    this.email = ko.observable("john@gmail.com");
    this.password = ko.observable("12345");

    self.submit = function () {
        var oUser = {
            email: self.email(),
            password: self.password()
        };

        // I am not getting back desired results here
        var loginResponse = user.login(oUser);
        alert(loginResponse.token);


    }

}; // End View Model


ko.applyBindings(new LoginViewModel());

и, наконец, вот мой файл пользовательского сервиса:

let user = {

    getUserSession: function () {
        var user = JSON.parse(sessionStorage.getItem('user'));
        console.log(`Getting User from Session: value = ${user} `);
        return user;
    },

    setUserSession: function (objUser) {
        var user = JSON.stringify(objUser);
        sessionStorage.setItem("user", user);
        console.log(`Setting User in Session: value = ${user} `);
    },



    login: function (objUser) {

        return fetch('../api/user/login.json', {
                method: "GET",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            })
            .then((response) => response.json())
            .then((responseData) => {
                console.log(responseData);
                return responseData;
            })
            .catch(error => console.warn(error));
    }




};

/* Helper Functions */
function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

export {
    user
};

Снимок экрана Console.Log Data

и вот значение оповещения из моего login-view-model.js ...

Неопределенный результат

По сути, Я просто хочу войти в систему пользователя .Если он действителен, возьмите токен, который возвращает API, и сохраните его в сеансе.Если токен не был возвращен, просто предупредите.

Я не знаю, почему это так сложно для меня.Я действительно был бы признателен за некоторые рекомендации по этому вопросу.

О, конечно, вы видите, что я просто тестирую эти ложные данные.Как только я получу эту функцию, я преобразую ее в POST и реальный URL.

Спасибо, что прочитали это.

John

Answer 1

Проблема 1

Ваши данные JSON прочитаны неправильно.

Быстрое решение

Ваш ответ - массив объектов.Сначала вам нужно найти нужный объект в нем, прежде чем получить доступ к его свойствам.Если он всегда один и тот же (первый), будет работать простой доступ к [0]:

// I am not getting back desired results here
var loginResponse = user.login(oUser);
alert(loginResponse[0].token); // <-- Add [0]

В противном случае вам придется выполнить итерации по нему с помощью цикла.

Лучшее решение

Если вы знаете, что вы всегда получаете только один или ноль объектов (в зависимости от того, успешно это было или нет), вы можете просто вернуть объект в коде сервера и не массив одного объекта .

Задача 2

Вы не выполняете свое обещание должным образом.Вы не можете вернуться из тогдашнего блока.Вы должны либо вернуть Promise, либо сделать функцию асинхронной.Проверьте фрагмент:

login: function (objUser) {
    return new Promise((resolve, reject) => { // <-- return a promise and not the fetch method
        fetch('../api/user/login.json', {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then((response) => response.json())
        .then((responseData) => {
            console.log(responseData);
            resolve(responseData); // <-- "return" the data
        })
        .catch(error => {
            console.warn(error);
            reject(error); // <-- reject if failed
        });
    })
}

И вам необходимо соответственно изменить другую часть:

// I am not getting back desired results here
user.login(oUser).then(response => {
   alert(response[0].token);
});