Aurelia получает клиент, не получающий данные от контроллера

Question

Я пытаюсь загрузить базу данных в контроллер (asp.net MVC), а затем использую клиент извлечения aurelia для загрузки данных из контроллера в представление, но aurelia не получает никаких данных (таблицы представления пусты, что не t результат при ручном объявлении массива входных данных)

EmployeesController (контроллер)

using Microsoft.AspNetCore.Mvc;
using SPAproject.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SPAproject.Controllers
{
    [Route("api/[controller]")]
    public class EmployeesController : Controller
    {
        private readonly EmployeesDbContext context;

        public EmployeesController(EmployeesDbContext context)
        {
            this.context = context;
        }

        [HttpGet]
        public IEnumerable<Employee> Get()
        {
            return context.Employees.ToList();
        }
    }
}

emp-api (где я беру данные)

import { HttpClient } from 'aurelia-fetch-client';
import { inject } from 'aurelia-framework';

let latency = 200;
let id = 0;


@inject(HttpClient)
export class EmpAPI {
    isRequesting = false;

    constructor(http) {
        this.http = http;
        this.http.configure(config =>
                            config.useStandardConfiguration()
                                    .withDefaults({
                                        mode: 'cors'
                                   }
                                 )
                             );
        this.employees = [];

        http.fetch('/api/Employees')
            .then(x => x.json())
            .then(employees => this.employees = employees);


    }

    getEmployeeList() {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let results = this.employees.map(x => {
                    return {
                        id: x.id,
                        firstName: x.firstName,
                        lastName: x.lastName,
                        email: x.email
                    }
                });
                resolve(results);
                this.isRequesting = false;
            }, latency);
        });
    }

    getEmployeeDetails(id) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let found = this.employees.filter(x => x.id == id)[0];
                resolve(JSON.parse(JSON.stringify(found)));
                this.isRequesting = false;
            }, latency);
        });
    }

    saveEmployee(employee) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let instance = JSON.parse(JSON.stringify(employee));
                let found = this.employees.filter(x => x.id == employee.id)[0];

                if (found) {
                    let index = this.employees.indexOf(found);
                    this.employees[index] = instance;
                } else {
                    instance.id = getId();
                    this.employees.push(instance);
                }

                this.isRequesting = false;
                resolve(instance);
            }, latency);
        });
    }
}

список сотрудников (куда я пытаюсь получить данные из API)

import { EventAggregator } from 'aurelia-event-aggregator';
import { EmpAPI } from 'emp-api';
import { inject } from 'aurelia-framework';
import { EmployeeUpdated } from 'employeeUpdated';
import { EmployeeViewed } from 'employeeViewed';

@inject(EmpAPI, EventAggregator)
export class EmployeeList {
    constructor(api, ea) {
        this.api = api;
        this.ea = ea;
        this.employees = [];

        ea.subscribe(EmployeeViewed, msg => this.select(msg.employee));
        ea.subscribe(EmployeeUpdated, msg => {
            let id = msg.employee.id;
            let found = this.employees.find(x => x.id == id);
            Object.assign(found, msg.employee);
        });
    }

    created() {
        this.api.getEmployeeList().then(employees => this.employees = employees);

    }

    select(employee) {
        this.selectedId = employee.id;
        return true;
    }
}

Answer 1

Либо вы можете использовать один из их методов обертки, как http.get('/api/Employees') в этом случае.

Если вы хотите использовать fetch, вам нужно указать метод http.fetch('/api/Employees', {method: 'GET'})

Answer 2

Проблема, которую вы видите, заключается в том, что вы не дождались возвращения своих данных. К тому времени ваш employee-list элемент создан, employees собственность в вашем EmpAPI все еще не определено, так как ваш вызов для извлечения данных еще не был возвращен.

Я вижу, что у вас есть задержка в 200 мс, чтобы предотвратить это, но иногда, возможно, этого недостаточно (я подозреваю, что это). Может быть, вы можете попробовать другую задержку, если хотите сохранить эту стратегию? Есть разные способы сделать это, например, решить getEmployeeList() обещать только тогда, когда вызов для извлечения данных уже разрешен, отложить вызов далее, дождаться вызова и т. д.