From ef6b095976f6e7387e8f4438113464149778e59e Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 16 Apr 2020 19:47:34 -0500
Subject: [PATCH] [Preview 4] Update Blazor HttpClient coverage (#17861)

---
 aspnetcore/blazor/call-web-api.md | 36 +++++++++++++++++++++----------
 aspnetcore/toc.yml                |  2 +-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/aspnetcore/blazor/call-web-api.md b/aspnetcore/blazor/call-web-api.md
index 18bf3f9225..67a6ed35ef 100644
--- a/aspnetcore/blazor/call-web-api.md
+++ b/aspnetcore/blazor/call-web-api.md
@@ -1,11 +1,11 @@
 ---
-title: Call a web API from ASP.NET Core Blazor
+title: Call a web API from ASP.NET Core Blazor WebAssembly
 author: guardrex
-description: Learn how to call a web API from a Blazor app using JSON helpers, including making cross-origin resource sharing (CORS) requests.
+description: Learn how to call a web API from a Blazor WebAssembly app using JSON helpers, including making cross-origin resource sharing (CORS) requests.
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 01/22/2020
+ms.date: 04/16/2020
 no-loc: [Blazor, SignalR]
 uid: blazor/call-web-api
 ---
@@ -28,9 +28,19 @@ See the following components in the *BlazorWebAssemblySample* sample app:
 
 ## Packages
 
-Reference the *experimental* [Microsoft.AspNetCore.Blazor.HttpClient](https://www.nuget.org/packages/Microsoft.AspNetCore.Blazor.HttpClient/) NuGet package in the project file. `Microsoft.AspNetCore.Blazor.HttpClient` is based on `HttpClient` and [System.Text.Json](https://www.nuget.org/packages/System.Text.Json/).
+Reference the [System.Net.Http.Json](https://www.nuget.org/packages/System.Net.Http.Json/) NuGet package in the project file.
 
-To use a stable API, use the [Microsoft.AspNet.WebApi.Client](https://www.nuget.org/packages/Microsoft.AspNet.WebApi.Client/) package, which uses [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/)/[Json.NET](https://www.newtonsoft.com/json/help/html/Introduction.htm). Using the stable API in `Microsoft.AspNet.WebApi.Client` doesn't provide the JSON helpers described in this topic, which are unique to the experimental `Microsoft.AspNetCore.Blazor.HttpClient` package.
+## Add the HttpClient service
+
+In `Program.Main`, add an `HttpClient` service if it doesn't already exist:
+
+```csharp
+builder.Services.AddSingleton(
+    new HttpClient
+    {
+        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
+    });
+```
 
 ## HttpClient and JSON helpers
 
@@ -64,7 +74,7 @@ private class TodoItem
 
 JSON helper methods send requests to a URI (a web API in the following examples) and process the response:
 
-* `GetJsonAsync` &ndash; Sends an HTTP GET request and parses the JSON response body to create an object.
+* `GetFromJsonAsync` &ndash; Sends an HTTP GET request and parses the JSON response body to create an object.
 
   In the following code, the `_todoItems` are displayed by the component. The `GetTodoItems` method is triggered when the component is finished rendering ([OnInitializedAsync](xref:blazor/lifecycle#component-initialization-methods)). See the sample app for a complete example.
 
@@ -76,11 +86,11 @@ JSON helper methods send requests to a URI (a web API in the following examples)
       private TodoItem[] _todoItems;
 
       protected override async Task OnInitializedAsync() => 
-          _todoItems = await Http.GetJsonAsync<TodoItem[]>("api/TodoItems");
+          _todoItems = await Http.GetFromJsonAsync<TodoItem[]>("api/TodoItems");
   }
   ```
 
-* `PostJsonAsync` &ndash; Sends an HTTP POST request, including JSON-encoded content, and parses the JSON response body to create an object.
+* `PostAsJsonAsync` &ndash; Sends an HTTP POST request, including JSON-encoded content, and parses the JSON response body to create an object.
 
   In the following code, `_newItemName` is provided by a bound element of the component. The `AddItem` method is triggered by selecting a `<button>` element. See the sample app for a complete example.
 
@@ -97,12 +107,14 @@ JSON helper methods send requests to a URI (a web API in the following examples)
       private async Task AddItem()
       {
           var addItem = new TodoItem { Name = _newItemName, IsComplete = false };
-          await Http.PostJsonAsync("api/TodoItems", addItem);
+          await Http.PostAsJsonAsync("api/TodoItems", addItem);
       }
   }
   ```
+  
+  Calls to `PostAsJsonAsync` return an <xref:System.Net.Http.HttpResponseMessage>.
 
-* `PutJsonAsync` &ndash; Sends an HTTP PUT request, including JSON-encoded content.
+* `PutAsJsonAsync` &ndash; Sends an HTTP PUT request, including JSON-encoded content.
 
   In the following code, `_editItem` values for `Name` and `IsCompleted` are provided by bound elements of the component. The item's `Id` is set when the item is selected in another part of the UI and `EditItem` is called. The `SaveItem` method is triggered by selecting the Save `<button>` element. See the sample app for a complete example.
 
@@ -125,9 +137,11 @@ JSON helper methods send requests to a URI (a web API in the following examples)
       }
 
       private async Task SaveItem() =>
-          await Http.PutJsonAsync($"api/TodoItems/{_editItem.Id}, _editItem);
+          await Http.PutAsJsonAsync($"api/TodoItems/{_editItem.Id}, _editItem);
   }
   ```
+  
+  Calls to `PutAsJsonAsync` return an <xref:System.Net.Http.HttpResponseMessage>.
 
 <xref:System.Net.Http> includes additional extension methods for sending HTTP requests and receiving HTTP responses. [HttpClient.DeleteAsync](xref:System.Net.Http.HttpClient.DeleteAsync*) is used to send an HTTP DELETE request to a web API.
 
diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml
index dc8c1cf93d..960881d252 100644
--- a/aspnetcore/toc.yml
+++ b/aspnetcore/toc.yml
@@ -357,7 +357,7 @@
           uid: blazor/handle-errors
         - name: Debug WebAssembly
           uid: blazor/debug
-        - name: Call a web API
+        - name: Call a web API from WebAssembly
           uid: blazor/call-web-api
         - name: Progressive Web Applications
           uid: blazor/progressive-web-app