JavaScript中AJAX请求所在if分支无法返回有效值如何解决？

问题原因 #

这个问题的核心是AJAX为异步执行机制，本质原因有3点：

• $.ajax执行后会立即返回，不会等待网络请求完成再执行后续代码，success回调是请求成功后才会异步触发的，此时外层get_name函数已经执行结束返回
• idType为1的分支下，你没有在get_name的外层作用域写return语句，函数默认返回undefined
• 代码存在笔误：data:{idName: idN} 中的idN是未定义变量，应该改为传入的参数idName

解决方案 #

以下提供3种常用的修复方案，按需选择即可：

方案1：回调函数方案（兼容性最高） #

修改get_name新增回调参数接收异步结果：

function get_name(idName, idType, callback){
   var resultString = ""
   if(idType == 1){
       $.ajax({
           type:"GET",
           url:"myFile.php",
           dataType:"JSON",
           data:{idName: idName}, // 修正笔误
           success: function(data){
              resultString = data.name 
              console.log(resultString)
              callback(resultString)
           },
           error: function(d){
              callback(null) // 错误场景可自定义返回值
           }
       });
   } else {  
       resultString =  "otherValueName" 
       console.log(resultString)
       callback(resultString)
   }
}

修改printName和调用逻辑：

function printName(exempIdName){
    get_name(exempIdName, 1, function(string){
        console.log(string)
        // 所有需要用到string的后续逻辑都写在该回调内
    })
}

printName("Alex");

方案2：Promise + async/await方案（代码结构最清晰，避免回调地狱） #

修改get_name返回Promise对象统一异步处理逻辑：

function get_name(idName, idType){
   return new Promise((resolve, reject) => {
       if(idType == 1){
           $.ajax({
               type:"GET",
               url:"myFile.php",
               dataType:"JSON",
               data:{idName: idName},
               success: function(data){
                  const resultString = data.name 
                  console.log(resultString)
                  resolve(resultString)
               },
               error: function(d){
                  reject(d)
               }
           });
       } else {  
           const resultString =  "otherValueName" 
           console.log(resultString)
           resolve(resultString)
       }
   })
}

用async/await调用：

async function printName(exempIdName){
    var string = await get_name(exempIdName, 1);
    console.log(string)
    return string
}

// 调用时如果需要获取返回值，也可以用then接收
printName("Alex").then(res => {
    // 后续处理逻辑
})

方案3：基于jQuery内置Deferred对象的简化方案 #

jQuery的$.ajax本身返回Deferred对象，不需要手动封装Promise，可直接简化写法：

function get_name(idName, idType){
   if(idType == 1){
       return $.ajax({
           type:"GET",
           url:"myFile.php",
           dataType:"JSON",
           data:{idName: idName}
       }).then(data => data.name)
   } else {  
       // 同步场景也返回Deferred对象，统一调用逻辑
       return $.Deferred().resolve("otherValueName").promise()
   }
}

// 调用方式和Promise方案完全一致
async function printName(exempIdName){
    var string = await get_name(exempIdName, 1);
    console.log(string)
    return string
}
printName("Alex")

内容的提问来源于stack exchange，提问作者Brododipollo