Aurelia - javascript/Typescript - 在返回承诺之前 typeahead 调用函数导致错误的问题

Question

在您清除预输入字段之前，这一切都有效，然后我在函数 suburbSelected(item) 中收到错误（如下所示），因为在预输入调用此函数之前承诺尚未解决。我得到的完整错误 - 其中两个如下：

  Uncaught (in promise) TypeError: Cannot read property 'postcode' of null
    at Address.app / components / clients / address / address.Address.suburbSelected(address.ts:126)
    at CallScope.evaluate(aurelia - binding.js:1524)
    at Call.callSource(aurelia - binding.js:4961)
    at AubsTypeaheadCustomElement.<anonymous>(aurelia - binding.js:4985)
    at aubs- typeahead.js:227
    at < anonymous >
        app / components / clients / address / address.Address.suburbSelected @ address.ts: 126
    evaluate @ aurelia-binding.js:1524
    callSource @ aurelia-binding.js:4961
        (anonymous) @ aurelia-binding.js:4985
            (anonymous) @ aubs-typeahead.js:227
    Promise.then(async)
    filterChanged @ aubs-typeahead.js:222
    descriptor.set @ aurelia-binding.js:5455
    assign @ aurelia-binding.js:1398
    assign @ aurelia-binding.js:1174
    updateSource @ aurelia-binding.js:4830
        (anonymous) @ debounce-binding - behavior.js:16
    setTimeout(async)
    debounce @ debounce-binding - behavior.js:15
    call @ aurelia-binding.js:4852
    callSubscribers @ aurelia-binding.js:304
    notify @ aurelia-binding.js:3849
    handleEvent @ aurelia-binding.js:3855


  Uncaught TypeError: Cannot read property 'postcode' of null
    at Address.app / components / clients / address / address.Address.suburbSelected(address.ts:126)
    at CallScope.evaluate(aurelia - binding.js:1524)
    at Call.callSource(aurelia - binding.js:4961)
    at AubsTypeaheadCustomElement.<anonymous>(aurelia - binding.js:4985)
    at AubsTypeaheadCustomElement.itemSelected(aubs - typeahead.js:356)
    at CallScope.evaluate(aurelia - binding.js:1524)
    at Listener.callSource(aurelia - binding.js:5113)
    at Listener.handleEvent(aurelia - binding.js:5122)
    at HTMLDocument.handleDelegatedEvent(aurelia - binding.js:3237)

这是郊区的预先输入：

    let suburbLookup = fetch("/api/selectData/QuerySuburbs" + queryString, {
        method: "GET",
        headers: headers
    })
        .then(response => {
            return response.json();
        })
        .then(addressLocation => {
            if (this.address.addressLocation == null) {
                console.log("ADDRESSLOCATION BEFORE: ", this.address.addressLocation)
                this.address.addressLocation = new AddressLocation;
                console.log("ADDRESSLOCATION AFTER: ", this.address.addressLocation)
            }
                return addressLocation;
        })
        .then(addressLocation => filter.length > 0 ? addressLocation.filter(item => item.suburb.toLowerCase().indexOf(filter.toLowerCase()) > -1) : addressLocation)
        .then(addressLocation => limit ? addressLocation.splice(0, limit) : addressLocation);  // Not really needed - its done on the server.
    //.then(suburbs => console.log("Suburbs: ", suburbs));

    //this.postCode = this.address.postcode;

    console.log("suburbLookup", suburbLookup);
    return suburbLookup
}

这是包含所有属性的预输入：

                    <aubs-typeahead data.call="getSuburbData(filter, limit)"
                                    value.bind="address.addressLocation"
                                    debounce.bind="350"
                                    placeholder="Suburb..."
                                    open-on-focus.bind="true"
                                    key="suburb"
                                    results-limit.bind="10"
                                    select-single-result.bind="true"
                                    on-select.call="suburbSelected(item)"
                                    id="suburbAutocomplete">
                    </aubs-typeahead>

你会注意到有一个属性叫做on-select.call="suburbSelected(item)"

它在发生错误的郊区选择（项目）中。这是那个函数：

suburbSelected(item) {
      console.log("BEFORE ASSIGNMENT OF SUBURB NAME: ", item, item.postcode, this.address.addressLocation.postcode) //THIS IS LINE 126...
      if (item) {
        this.address.addressLocation.postcode = item.postcode;
      } else {
          this.address.addressLocation.postcode = "-";
      }
  }

在函数suburbSelected(item)运行之前，如何智能地等待promise完成？如果它等待返回的承诺，我相信它不会出错......有没有一种很好的 Typescript/Javascript 方法可以让这个函数等待另一个承诺解决？？

Answer 1

从您发布的代码中不清楚，如何调用 fetch，但我相信您可以通过 async/await 回避问题

   async getData(filter:any){  // your fetch data method
        let result = await Promise.resolve({a:'b'})  // magic happens here

        return result
    }