angular 6 HttpClient 请求数据方式总结

ゝ一世哀愁。 2023-07-02 03:16 6阅读 0赞

前端应用都需要通过HTTP协议与后端进行服务通，目前浏览器主要支持两种API通讯：XMLHttpRequest 接口和 fetch() API。而anluar最新提供的HttpClient是基于XMLHttpRequest 提供的接口。

--------------------

**老版本方式：**

之前的方式，以http和jsonp为例，如果需要使用，则需要在app.module.ts 中导入对应的模块，并且要声明。然后再在对应的服务里面引用声明。

![format_png][]

导入

![format_png 1][]

声明

![format_png 2][]

导入

![format_png 3][]

实例化

--------------------

**新版:**

直接在app.model.ts引用一个文件就行:

![format_png 4][]

导入

![format_png 5][]

调用

--------------------

需要注意的是，现在JSON是默认的数据格式，不需要像之前一样使用如下的代码：

> http.get(url).map(res => res.json()).subscribe(...)

**get请求现在直接使用:**

> http.get(url).subscribe(...)

使用get方法请求数据时候，当需要拼接参数的时候：预期URL:

> https://jsonplaceholder.typicode.com/todos?\_page=1&\_limit=10

我们可以直接在 链接后面拼参数传输，也可以使用HttpParams 对象 传参。

使用HttpParams时：

> import\{ HttpClient, HttpParams \}from"@angular/common/http";

三种不同的方式

> const params =newHttpParams().set("\_page","1").set("\_limit","10");//方式一：链式语法，set不能分开写
> 
> const params =newHttpParams(\{fromString:"\_page=1&\_limit=10"\});//方式二：使用 fromString
> 
> const params =newHttpParams(\{ fromObject: \{ \_page:"1", \_limit:"10"\} \});//方式三：使用 fromObject
> 
> http.get(url,\{params\}).subscribe(...)

**post请求：**

> import\{ HttpClient, HttpParams, HttpHeaders \}from"@angular/common/http";
> 
> const headers =newHttpHeaders().set("Content-type","application/json; charset=UTF-8");
> 
> this.http.post("https://jsonplaceholder.typicode.com/todos", \{userId:1,title:"learn ionic 4",completed:false  \},  \{ headers \} )  .subscribe( val =>  \{
> 
>                                        console.log("Post call successful value returned in body", val);
> 
>                                          \},    error => \{
> 
>                                     console.log("Post call in error", error);
> 
>                                       \}, () => \{
> 
>                                  console.log("The Post observable is now completed.");
> 
>                                   \}
> 
>                         );

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My1lZDNhMTc5ZGIzY2Q4YWJiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzgyNy9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My03OTNhZDhkNjYzN2ExZWVmLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzYyNS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My02Y2NmMDRjZDIzNDRjOGJiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzYzNi9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My05M2I1ZWFhYjJlMzk3MzE5LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzg0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My1mYzcxODlmZWU4ODcwMDFkLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzU4OS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjQ3NjI3My01ZGJjZGQzOWI3ZmQ1MjgzLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY0Ny9mb3JtYXQvd2VicA?x-oss-process=image/format,png