javascript 执行一个方法，方法内有ajax，返回的结果是undefined

Question

问题描述

javascript 有两个函数，第1个内有ajax，第2个根据函数1返回的数据处理后再返回新的数据，以下代码返回的是NaN

相关代码

// 重后台获取数据,根据pid返回不同的数据,例如返回的10
var cloth = function(pid){
    $.get('api/cds?pid='+pid,function(data){
        return data;
    });
}


// 处理数据 cloth()返回的数据后，返回新的数据
var clothData = function(pid,thisId){
    return cloth(pid) + thisId;
}

console.log(clothData(1,10));

你期待的结果是什么？实际看到的错误信息又是什么？

clothData 返回的是20

Answer 1

因为 clothSelect 函数没有 return 返回值,默认为 undefined

像下面这样,用 return 返回,就不会为 undefined

var clothSelect = function() {
  return $.ajax({
    ...
  })
}

如果要获取 ajax 返回的数据,可以使用下面几种方式

第一种方式

var clothSelect = function() {
  $.ajax({
    ...
    success: function(data) {
      // 可以在这里处理数据
      console.log(data)
      return data
    },
  })
}

第二种方式

var clothSelect = function() {
  return $.ajax({
    ...
  })
}
clothSelect().done(data=>{
  // 在这里处理数据
  console.log(data)
})

更多方式,比如自己定义回调函数传入,或者包装成 Promise,然后更进一步用 async

Answer 2

异步使用Promise

Answer 3

可以使用ES7里面的async await

Answer 4

因为异步阻塞了，会先执行下面的console.log 等异步执行完了之后才会执行 var clothSelect