我的返回值函数失败 - 我认为与承诺相关

Posted 2023-03-27

【中文标题】我的返回值函数失败 - 我认为与承诺相关

【英文标题】：My return value function is failing - Promise related I think

【发布时间】：2019-11-19 21:15:07

【问题描述】：

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

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

这是我正在使用的模拟 Json

[
    
      "id":1,
      "firstName":"John",
      "lastName":"Smith",
      "email":"[e-mail]",
      "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("[e-mail]");
    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 数据截图

这是来自我的 login-view-model.js 中的警报值...

未定义的结果

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

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

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

感谢您阅读本文。

约翰

【参考方案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。您无法退出 then 块。您应该返回一个 Promise 或使函数异步。检查sn-p：

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);
);

【讨论】：

我添加了 0 ，现在得到这个： Uncaught TypeError: Cannot read property 'token' of undefined

@JohnS。检查答案。更新

@ MauriceNino - 对我的问题做出了深思熟虑的回应。它现在工作正常 - 更重要的是，我了解了为什么它不起作用。我正忙于尝试从 THEN 中返回数据——我从不知道你做不到。谢谢一百万！

@JohnS。没问题！很高兴我能帮助你。另外，还有一个提示：如果您不喜欢 .then() 链，您可以阅读 async/await 模式。它比承诺返回更清洁。

哇，再次@MauriceNino - 另一个很棒的建议。是的，我决定采用这种方法，因为它对我来说更容易。