javascript setTimeOut in Angular(Angular 超时)，以延迟返回数据

ig9co6j1  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(168)
getCustomersFromAPICall(): CustomerModel[] {
    setTimeout(()=> {
        return this.dataFromAPICall = [
            {
                firstName: 'Nintendo',
                lastName: 'Switch',
                caseID: 123,
                employeeNumber: 1234,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Intermittent,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Open,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/1990'),
                endDate: new Date('12/01/2000'),
                lastUpdated: new Date('1/1/1991')
            },
            {
                firstName: 'Nintendo',
                lastName: 'Switch',
                caseID: 124,
                employeeNumber: 1234,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Continuous,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Closed,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/1990'),
                endDate: new Date('12/01/2000'),
                lastUpdated: new Date('1/1/1991')
            },
            {
                firstName: 'Nintendo',
                lastName: 'Switch',
                caseID: 125,
                employeeNumber: 1234,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Intermittent,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Closed,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/1990'),
                endDate: new Date('12/01/2000'),
                lastUpdated: new Date('1/1/1991')
            },
            {
                firstName: 'Storm',
                lastName: 'Kevin',
                caseID: 123,
                employeeNumber: 1239,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Intermittent,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Open,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/1990'),
                endDate: new Date('12/01/2000'),
                lastUpdated: new Date('1/1/1991')
            },
            {
                firstName: 'Scott',
                lastName: 'Summer',
                caseID: 124,
                employeeNumber: 1235,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Continuous,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Closed,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/2000'),
                endDate: new Date('12/01/2001'),
                lastUpdated: new Date('1/1/2005')
            },
            {
                firstName: 'Victor',
                lastName: 'Von Doom',
                caseID: 125,
                employeeNumber: 1236,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Intermittent,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Open,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('12/01/2010'),
                endDate: new Date('12/01/2005'),
                lastUpdated: new Date('1/1/2009')
            },
            {
                firstName: 'Bruce',
                lastName: 'Banner',
                caseID: 126,
                employeeNumber: 1237,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Continuous,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Open,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('05/01/1990'),
                endDate: new Date('01/01/1000'),
                lastUpdated: new Date('1/1/2021')
            },
            {
                firstName: 'Peter',
                lastName: 'Parker',
                caseID: 127,
                employeeNumber: 1238,
                photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
                displayCaseCode: '15',
                reasonName: '1C',
                frequencyType: FrequencyType.Continuous,
                emailAddress: 'NJ',
                networkID: 'ABC',
                caseState: CaseState.Closed,
                requestDate: new Date('12/12/2012'),
                startDate: new Date('08/01/2015'),
                endDate: new Date('01/01/1000'),
                lastUpdated: new Date('10/1/2022')
            }
        ];
    }, 2000);
    return this.dataFromAPICall;
}

使用这段代码，我似乎没有得到想要的结果

findEmployee() {
    //debugger;
    this.searchEmployeeList = this.getCustomersFromAPICall();

如果我删除setTimeout，它可以正常工作，但我想通过添加setTimeout（）来测试UI，看看网络是否很慢

JavaScript

2条答案

按热度按时间
ruoxqz4g

ruoxqz4g1#

您的代码正确返回空值

如果你用一个小一点的对象来替换这个长的对象，并修剪变量/函数名，你会立刻意识到这是不正确的：

getCustomers(){

    setTimeout(()={
        return this.data = [{ test: 1 }]
    })
    return this.data
}

你的函数设置了一个超时，但是 * immediate * 返回this.data的 current 值，这就是为什么你什么也得不到--你得到的是this.data的值，在你向它添加元素之前。

您可能需要一个异步函数

查看承诺：如何创建和返回它们。
看看是否可以设计一个异步函数：这可以返回一个承诺，而不是一个实际值。2承诺可以在以后解析为实际值。3例如，这可以在一个由setTimeout控制的延迟之后。

赞(0）分享  回复(0）举报  2023-01-29
kknvjkwl

kknvjkwl2#

尝试使用承诺...

const customerFixture: CustomerModel[] = {
       ...
       employeeNumber: 1234,
       endDate: new Date('12/01/2000'),
       lastUpdated: new Date('1/1/1991'),
       ...
}

getCustomersFromAPICall(): Promise<CustomerModel[]> {
   // Here you return a promise that be resolve in 2 seconds (2000 in milliseconds) with customers
   return new Promise((resolve) =>
      setTimeout(() => resolve(customerFixture), 2000),
    );;
}
async findEmployee() {
    //You should wait the promise to be solved using "await" word before the method call. Also to make this work you have to add "async" word before this method name.
    this.searchEmployeeList = await this.getCustomersFromAPICall();
    // try to log it
    console.log(this.searchEmployeeList)

如果不想使用async/await，另一个选项是

findEmployee() {
    //In this case you dont block the thread waiting the two seconds to be solved
    this.getCustomersFromAPICall().then(customers => {
      this.searchEmployeeList = customers;
      console.log(this.searchEmployeeList)
    })
    // try to log it
赞(0）分享  回复(0）举报  2023-01-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com