javascript - 在 Angular 4 的 Promise 中连接数组后将其显示为未定义

Question

我有一个功能:

filterAllComponent(inputdata) {
    let a=[], b=[],c=[];
    a=  this.getfilterPlaces(inputdata);
    b= this.getfilterTransporter(inputdata);
    c= this.getfilterVehicles(inputdata);

    let getplaceArray = [],
  getTransporterArray = [],
  getVehicleArray = [];

let getPlacePromise = function () {
  const self = this;
  return new Promise(function (resolve, reject) {
    getplaceArray = a;
    resolve("got places\n");
  });
};

let getTransporterPromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getTransporterArray =  b
    resolve(message + "got Transporter");
  });
};

let getVehiclePromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getVehicleArray = c
    resolve(message + "got vehicle");
  });
};

getPlacePromise().then(function (result) {
  return getTransporterPromise(result);
}).then(function (result) {
  return getVehiclePromise(result);
}).then(function (result) {
  var AllDropdownValues = getTransporterArray.concat(getVehicleArray).concat(getplaceArray);
  console.log(AllDropdownValues);
});


}

需要将数组 AllDropdownValues 与 getVehicleArray、getplaceArray 和 getTransporterArray 连接起来。在最终结果中，数组 getplaceArray 显示未定义。其余结果正确显示。

调用函数:

getfilterTransporter(autocompleteInputData) {

    var k= this.checkRegex(autocompleteInputData);
    this.getfilteredTransporter= this.filterTransporters(k);
    return this.formatTransporterValue(this.getfilteredTransporter);
}
getfilterVehicles(autocompleteInputData) {

  var k= this.checkRegex(autocompleteInputData);
    this.getfilteredVehicle= this.filterVehicles(k);
    return this.formatVehicleValue(this.getfilteredVehicle);
}
getfilterPlaces(autocompleteInputData) {
  if (autocompleteInputData == '' || typeof(autocompleteInputData) == 'object') 
  return null;
  this.placeData.getPlacesFromPig(autocompleteInputData)
  .subscribe(response =>
    return this.formatPigResponse(response);
   }); 

}

对于getfilterPlaces，subscribe() 用于从 API 调用中提取数据。但是当我调用函数 filterAllComponent() 时，getfilterPLaces 未填充，但其他两个函数执行正常。

Answer 1

您的代码存在的问题是，订阅中的返回表达式没有作为getfilterPlaces函数的返回值返回>。这意味着，如果设置了 autocompleteInputData 并且没有对象，则您的 getfilterPlaces 函数 没有指定的返回值。

问题是，this.placeData.getPlacesFromPig 似乎是一个异步函数，并返回一个 rjxs Observable 或类似的东西。避免此问题的一种方法是使用 await 运算符和 async function declaration 。为此，您必须将 getfilterPlaces 和 filterAllComponent 函数 标记为 async 并使用 a = wait this.getfilterPlaces(inputData) 。此外，getfilterPlaces 需要返回一个Promise。假设 this.placeData.getPlacesFromPig 返回一个 rxjs Observable，代码将如下所示:

async function getfilterPlaces(autocompleteInputData) {
  if (autocompleteInputData == '' || typeof(autocompleteInputData) == 'object') 
    return null;
  return this.placeData.getPlacesFromPig(autocompleteInputData)
    .toPromise()
    .then(response => this.formatPigResponse(response));
}

<小时/>

async function filterAllComponent(inputdata) {
  let a=[], b=[], c=[];
  a = await this.getfilterPlaces(inputdata);
  b = this.getfilterTransporter(inputdata);
  c = this.getfilterVehicles(inputdata);
[...]