Aurelia 获取客户端未从控制器接收数据答案

【问题标题】：Aurelia fetch client not receiving data from controllerAurelia 获取客户端未从控制器接收数据
【发布时间】：2019-07-12 05:08:14
【问题描述】：

我正在尝试在控制器（asp.net MVC）中加载数据库，然后使用 aurelia fetch 客户端将数据从控制器加载到视图中，但 aurelia 没有获取数据（视图表为空这不是手动声明输入数组时的结果）

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);
        });
    }
}

employee-list（我试图从 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;
    }
}

【问题讨论】：

标签： asp.net-mvc aurelia http-get aurelia-fetch-client

【解决方案1】：

在这种情况下，您可以使用他们的wrapper methods 之一，例如http.get('/api/Employees')。

如果要使用fetch，则需要指定方法http.fetch('/api/Employees', {method: 'GET'})

【讨论】：

【解决方案2】：

您看到的问题是因为您没有等待数据返回。在创建 employee-list 元素时，EmpAPI 中的 employees 属性仍未定义，因为您的数据获取调用尚未返回。

我发现您有 200 毫秒的延迟来防止这种情况发生，但有时这可能还不够（我怀疑这一点）。如果你想保持这个策略，也许你可以尝试不同的延迟？有不同的方法可以做到这一点，例如仅在数据获取调用已经解决时才解析getEmployeeList() promise，进一步延迟调用，等待调用等。

【讨论】：