问题 我正在一个简单的登录页面上。从视图模型脚本中,我调用另一个脚本来处理对我的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
};
这是我的login-view-model.js中的警报值...
基本上, 我只想登录用户 。如果有效,请获取API返回的令牌,并将其保存到会话中。如果未返回令牌,只需发出警报。
我不知道为什么这对我来说是如此困难。我真的很希望对此有一些指导。
当然,您会看到我正在使用此模拟数据进行测试。获得此功能后,我会将其转换为POST和真实的URL。
谢谢阅读。
约翰
答案 0 :(得分:2)
您的JSON数据无法正确读取。
您的响应是对象的数组。您首先需要在其中找到正确的对象,然后才能访问其属性。如果始终相同(第一个),则可以轻松访问[0]
:
// I am not getting back desired results here
var loginResponse = user.login(oUser);
alert(loginResponse[0].token); // <-- Add [0]
否则,您将不得不通过循环对其进行迭代。
如果您知道总是只得到一个或零对象(取决于是否成功),则可以简单地返回对象< / strong>,而不是一个对象的数组。
您没有正确处理Promise。您不能返回then块。您应该返回一个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);
});