Blog

Blazor 애플리케이션에서 REST API를 호출하고 사용하는 방법에 대해 설명합니다 .

Blazor Component 가 REST API를 직접 호출할 수 있을까?

Blazor 구성 요소는 REST API를 직접 호출할 수 있습니다. 그러나 에러 및 코드를 깔끔하게 처리하려면 REST API를 호출하는 별도의 서비스를 만드는 것이 좋습니다.

REST API를 호출하는 서비스 만들기

Blazor 웹 애플리케이션 프로젝트에 이름이 Services 인 폴더를 추가합니다 . 이 폴더에 다음 2개의 클래스 파일을 추가합니다.

1. IEmployeeService.cs
2. EmployeeService.cs

IEmployeeService.cs

public interface IEmployeeService
{
    Task<IEnumerable<Employee>> GetEmployees();
}

EmployeeService.cs

• REST API 서비스를 호출하기 위해 HttpClient 클래스를 사용하고 있습니다 .
• 이 클래스는 System.Net.Http 네임스페이스 에 있습니다 .
• HttpClient는 종속성 주입을 사용하여 EmployeeService 에 주입됩니다 .
• httpClient.GetJsonAsync를 사용하여 REST API를 호출하고 있습니다. 이 메서드는 Microsoft.AspNetCore.Blazor.HttpClient Nuget 패키지 에 있습니다 . 이 패키지를 설치하고 Microsoft.AspNetCore.Components 네임스페이스를 포함해야합니다.
• REST API endpoint (api/employees) 을 httpClient.GetJsonAsync 메서드 에 전달합니다 .
  

httpClient.GetJsonAsync<Employee[]>("api/employees")​

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Services
{
    public class EmployeeService : IEmployeeService
    {
        private readonly HttpClient httpClient;

        public EmployeeService(HttpClient httpClient)
        {
            this.httpClient = httpClient;
        }

        public async Task<IEnumerable<Employee>> GetEmployees()
        {
            return await httpClient.GetJsonAsync<Employee[]>("api/employees");
        }
    }
}

HttpClient 서비스 등록

Startup 클래스의 ConfigureServices 메서드 에서 AddHttpClient 메서드를 사용하여 HttpClient 서비스를 등록합니다 .

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();

    services.AddHttpClient<IEmployeeService, EmployeeService>(client =>
    {
        client.BaseAddress = new Uri("https://localhost:44379/");
    });
}

Blazor 구성 요소에서 서비스 호출

• 마지막으로 EmployeeList blazor 구성 요소 에서 IEmployeeService를 호출합니다 .
• [Inject] 속성을 사용하여 Blazor 구성 요소에 서비스를 주입합니다. 이를 위해 생성자를 사용할 수 없습니다.
• 구성 요소 OnInitializedAsync 메서드에서 EmployeeService.GetEmployees 메서드를 호출합니다 .
• 이 메서드가 반환하는 데이터(직원 목록)는 직원 속성을 초기화하는 데 사용됩니다.
• EmployeeList Blazor component 는 이 직원 속성에 바인딩하여 직원 목록을 표시합니다.

using EmployeeManagement.Models;
using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Pages
{
    public class EmployeeListBase : ComponentBase
    {
        [Inject]
        public IEmployeeService EmployeeService { get; set; }

        public IEnumerable<Employee> Employees { get; set; }

        protected override async Task OnInitializedAsync()
        {
            Employees = (await EmployeeService.GetEmployees()).ToList();
        }
    }
}