Angular 向后端发送请求
<h1 id="angular-向后端发送请求">Angular 向后端发送请求</h1><h2 id="技术概述">技术概述</h2>
<p>在前后端分离的WEB项目中，前端需要从后端发送请求获取数据然后在前端页面展示，用户通过前端页面进行的操作也需要前端发送请求到后端处理。该博客主要介绍Angular前端如何向后端发送请求并进行错误处理。</p>
<h2 id="技术详述">技术详述</h2>
<p><img src="https://img2020.cnblogs.com/blog/1391452/202006/1391452-20200615201546634-1373137845.png" alt="" loading="lazy"></p>
<h3 id="创建-api-url-服务">创建 api-url 服务</h3>
<p>因为在项目开发过程中发现后端的api-url很多，如果前端不能统一管理那么当下次后端修改了api-url之后，前端的修改就很麻烦，所以统一通过api-url的服务类来获取对应的请求地址<br>
<img src="https://img2020.cnblogs.com/blog/1391452/202006/1391452-20200615201701555-1309948422.png" alt="" loading="lazy"></p>
<h3 id="创建数据模型类">创建数据模型类</h3>
<p>后端返回的数据类型为json格式，前端可以创建对应的数据类型名接受后端返回的数据<br>
<img src="https://img2020.cnblogs.com/blog/1391452/202006/1391452-20200615202421223-1337940673.png" alt="" loading="lazy"></p>
<h3 id="创建负责-http-请求的服务">创建负责 http 请求的服务</h3>
<p>将http请求封装为服务，在每个模块都可以调用<br>
<img src="https://img2020.cnblogs.com/blog/1391452/202006/1391452-20200615201937513-983142099.png" alt="" loading="lazy"></p>
<h2 id="遇到的问题">遇到的问题</h2>
<h3 id="当前端请求失败的时候如何处理">当前端请求失败的时候，如何处理</h3>
<p>通过回调函数分别处理请求成功和请求失败的情况<br>
<img src="https://img2020.cnblogs.com/blog/1391452/202006/1391452-20200615202125835-1580995907.png" alt="" loading="lazy"></p>
<h2 id="参考资料">参考资料</h2>
<p>Angular 中文官网</p><br><br>
来源：https://www.cnblogs.com/konananan/p/13137616.html
頁:
[1]