angular网络图片拉取(base64格式)+网络请求错误处理机制+angular编写service

一、目的

1. 掌握HttpClient异步请求和编写服务service处理Http GET的技能
2. 学会网络请求错误机制处理技术
3. 掌握Component的subscribe订阅机制运用技巧

二、内容

1. 在 src/app/components/get-image 下创建组件 GetImageComponent
2. 在 src/app/components/services 下创建服务 GetImageService
3. GetImageComponent 的 html 要求：

1. 创建四个 标签，id分别对应 btn1 , btn2 , btn3 , btn4 ；
2. 创建一个 标签，id为 img ,用来显示图片；
3. 注意：没有请求到图片时img标签不应该出现在页面上。 其中四个button的点击事件需利用 GetImageService 服务分别向以下四个接口执行 HttpClient.get() 请求：
   

4.当 get 请求正确时，将返回的图片以 height:250px / width:310px 大小显示到对应的img标签 中
get 请求到的数据的 JSON 内容如下：

5.要求所有接口进行HttpClient.get()请求时，需对服务器响应数据进行错误处理，错误处理要求如下：

4. 请求服务器超时（6秒不反应视为超时）时，页面应出现“请求超时，请稍后再试”提示；
5. 请求服务器后返回值为空时，页面应出现“没有找到对应的图片”提示；
6. 请求服务器出现其它错误时，页面应出现“请求错误，错误原因：xxxxx”提示。 注意：“xxxx”是具体错误的信息，此处只举例说明，故以“xxxx”表达。

三、实现参考

1.创建服务service和组件component

1. 在vscode终端中创建组件：

ng generate component components/get-image 

2. 在vscode终端中创建服务：

ng generate service services/get-image 

3. 将创建的组件载入到app.component.html（组件的模版文件）中

<app-get-image></app-get-image>

2. 创建标签，并定好id属性

1. 在创建的组件html文件（或template）中创建四个 和一个 标签，并定好 id 属 性。
   src/app/components/get-image/get-image.component.html

<div class="ImgBox">
<div>
    <button (click)="getImage(0)" id="btn1" class="btn">成功请求图片</button>
    <button (click)="getImage(1)" id="btn2" class="btn">http请求超时</button>
    <button (click)="getImage(2)" id="btn3" class="btn">http请求返回为空</button>
    <button (click)="getImage(3)" id="btn4" class="btn">http请求其它错误</button>
<