我的 return 值函数失败 - 我认为与 Promise 相关

Question

问题我正在开发一个简单的登录页面。在我的视图模型脚本中，我调用了另一个脚本来处理对我的 API.

的调用

简而言之，我没有取回我想要的预期数据，这只是一个令牌字符串（表示登录成功）。

这是我正在使用的模拟 Json

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

我的视图模型脚本

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 数据的屏幕截图

这是我的登录视图中的警报值-model.js...

未定义的结果

本质上，我只想登录用户。如果有效，获取 API 返回的令牌，并将其保存到会话中。如果未返回令牌，只需提醒即可。

我不知道为什么这对我来说如此困难。我真的很感激关于这方面的一些指导。

哦，当然，你看我只是用这个模拟数据进行测试。一旦我得到这个功能，我会把它转换成 POST 和真正的 URL.

感谢您阅读本文。

约翰

Answer 1

问题 1

您的 JSON 数据未正确读取。

快速解决方案

您的响应是 对象数组 。在访问其属性之前，您首先需要在其中找到正确的对象。如果它总是相同的（第一个），那么简单地访问 [0] 就可以了：

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

否则，您将不得不循环遍历它。

更好的解决方案

如果你知道你总是只得到一个或零个对象（取决于它是否成功），你可以只是 return 服务器代码中的对象 而 不是一个对象的数组 .

问题 2

您没有正确处理您的 Promise。你不能 return 出 then 块。您应该 return 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);
});

我的 return 值函数失败 - 我认为与 Promise 相关

My return value function is failing - Promise related I think

javascript

json

ecma

knockout.js

问题 1

快速解决方案

更好的解决方案

问题 2