Question

我知道这是一个高度回答的话题，但是如果我的困境有我想要的解决方案，那么读大量的帖子是我无法想象的。

我想写一个简单的函数，它返回传递UserId的用户名。它将在任何地方用于多种用途。

function getUserName(userId) {
    //...some code to retrieve the Name from a REST webservice like $.ajax or $.getJSON or anything else that helps me achieve my need
    return name;
}

$('#txtUserName').val(getUserName(sessionStorage.userId));
//...
if (getUserName(sessionStorage.userId) == getUserName($('#inputUser').val())) {
    alert('Error: User typed with the same name as '+ sessionStorage.userID);
}

我知道可以将所有内容重写为回调或其他内容，但我想知道是否有任何实现可以编写这个从PHP webService返回值的简单函数。

我想象一个像这样的函数：

function getUserName(userId) {
    var users ={
        'me': 'Seak Oink'
        , 'you': 'Who knows'
        , 'jd': 'John doe'
    };
    return users[userId];
}

...但是我没有固定用户对象，而是从我从php获取它的php webService中检索它。

使用回调，无法处理值。例如（如果我使用回调并假设调用getUserName(userId, callback)处理函数调用）：

$('#txtUserName').val('');
getUserName(sessionStorage.userId, function(userName) {
    $('#txtUserName').val(userName);
});
if ($('#txtUserName').val() == '') {
    alert('user '+ sessionStorage.userId +' doesn't exist');
}

相反，你可以回答我把它放到回调中，但是如果需要再次调用我的函数，我必须一次又一次地将它嵌入回调...我认为这是一个糟糕的编程习惯：

$('#txtUserName').val('');
getUserName(sessionStorage.userId, function(userName) {
    $('#txtUserName').val(userName);
    getUserName($('#inputUser').val(), function (userName2) {
        if (userName2 == userName) {
            alert('Error: User typed with the same name as '+ sessionStorage.userID);
        }
        //....here I must continue the code flow instead of continuing to caller's flow.
        //...nesting, and more nesting... impossible to read code?¿¿?:
        userpermission(userId, function(bAllowed) {
           if (bAllowed) {
              saveRecord(userId, sKey, sSomeText, function () {
                 alert('record saved -or not-');
                 // ...and continue nesting
              });
           } else {
             alert('forbidden');
           }
        });
    });
});

...而不是这个简单的代码流逻辑：

var lOk = false;
$('#txtUserName').val('');
$('#txtUserName').val(getUserName(sessionStorage.userId);
if ($('#inputUser').val() == getUserName($('#inputUser').val())) {
   alert('Error: User typed with the same name as '+ sessionStorage.userID);
}
if (userpermission(userId)) {
   lOk = saveRecord(userId, sKey, sSomeText);
} else {
   alert('forbidden');
}
if (lOk) {
  alert('record saved');
}
// ...continue the validation process or whatever

我理解使用回调检索值的简单示例，但不要在代码逻辑中使用它。

我已经阅读了How do I return the response from an asynchronous call?，更像是这样并理解了，但我无法理解如何使用来自不同来源的检索值并应用必要的逻辑。基本上，如何订购混乱？

Answer 1

您似乎遇到了callback hell。当您有多个异步函数并且需要处理所有错误和成功时，就会发生这种情况。

这正是承诺发明的情况。

如果您没有ES6，请查看jquery promises，否则它们是内置的：ES6 promise

它们允许更可读，同步的代码。

例如，您可以执行以下代码：

 $.when( // waits for two promises to be resolved
        getUserName(userId)
            .then(function(name) {  // once name resolved, fetch profile (new promise)
                return getUserProfile(name); 
            }),
        getUserPoints(userId) // another independent promise
   ).done(function(userProfile, userPoints) { // the two above are done, I can move on and update the DOM
       $("#profile").doSomething(userProfile); 
       $("#points").doOtherThing(userPoints);
   });

从webservice返回值的函数

1 个答案: