前言
在前端开发过程中，我们经常需要获取后端接口数据并进行交互，而 fetch API 作为一种新的网络请求方法，越来越多地被应用到前端开发中。而针对 Angular 2 开发框架的 emiya-angular2-fetch npm 包，则可以更加快速地实现网络请求操作。
本文将为您介绍 emiya-angular2-fetch 的使用方法，并提供示例代码，帮助您更加详细地了解该工具的使用，以及在工作中如何应用它。
emiya-angular2-fetch 的安装
首先，在使用 npm 包前，需要先切换 npm 源，以便加速包的安装速度。
npm config set registry https://registry.npm.taobao.org/
其次，在终端中输入以下命令，即可安装 emiya-angular2-fetch 包：
npm install emiya-angular2-fetch --save
安装完成后，在您的 app.module.ts 文件中引入模块，并将其注入到您的项目中：
-- -------------------- ---- -------
------ - ------------------------ - ---- -----------------------
-----------
-------- -
-------------------------
-- ---
--
-- ---
--
------ ----- --------- --emiya-angular2-fetch 的使用
向远程服务器发送请求
首先，在您的组件中引入我们的服务类：
import { FetchService } from 'emiya-angular2-fetch';在完成以上两个步骤后，您即可开始使用 fetch API 向服务器发送请求。
-- -------------------- ---- -------
-------------
------ ----- --------- -
------------
------- ------------- ------------
- --
------------- ------------ -
------ --------------------------------- -
-------- -
-- ------- -----
--------------- ------------------
--
------- -
-- ------ ---------
----- -
-
---
-
-上述代码中，我们为您提供了一个获取远程后端数据的示例。您需要将远程服务地址设置为第一个参数（这里用了 api/data 作为示例）并在第二个参数中进行各种配置，比如 headers，params，甚至更多。
同时，使用 Promise 可以使您在请求成功后，根据需要执行更多的操作，或完成其他前端页面的联动效果。
拦截器设置
若您需要在请求之前或之后执行一些操作，例如进行身份验证、将请求数据转换为URL参数等，则可以使用拦截器。
-- -------------------- ---- -------
-------------
------ ----- ------------- -
------------------ ------------- -------------------- -
-- ------------
-------------------------
------ -------------------------
-
------------------------ ---------- ----------------- -
-- --------------
----------------------
------ --------------------------
-
-拦截器通过 intercept() 方法和 interceptAfter() 方法进行设置。在创建您的拦截类时，您需要添加 EmiyaFetchInterceptorInterface 接口并实现两个拦截器方法。
在拦截器中，可以进行一系列的自定义逻辑处理，例如 console.log() 输出请求 URL，或者验证身份，并通过 Promise 来返回处理结果。
错误处理
在发送网络请求时，自然难免会出现意外错误，例如网络连接中断、服务器错误等。针对此类错误，除了进行自定义错误信息处理外，在 emiya-angular2-fetch 中也提供了一种全局的异常处理器。
在您的主模块文件中，您可以使用以下示例代码进行全局错误处理：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
-----------
-- ---
-- ---------
---------- -
-
-------- -------------
--------- -----------------
-
-
--
------ ----- --------- - -针对服务器返回的状态码，我们也提供了以下常用的状态码处理方式用于对异常进行处理：
-- -------------------- ---- -------
-------------
------ ----- -------------- ------- ------------------------------- -
---------------------- --------------- -------- ------------- ---- -
------ ---------------------- -
---- --------------------------------
-- ---
------
---- --------------------------
-- ---
------
---- -----------------------------
-- ---
------
---- --------------------------
-- ---
------
---- --------------------------------------
-- ---
------
---- ----------------------------
-- ---
------
--------
-- ---
------
-
-
-使用示例
针对以上的 fetch 请求操作，我们给出以下更加详细的代码示例，供您参考：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------- ----------- - ---- -----------------------
-------------
----------- ------
--
------ ----- --------- -
------------------- ------------- ------------- --
-- ------- ---- --
----------------- ----- ------------ -
----- ---- ----------- - -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
------ ---------------------------------- -----
-
-- ------- ------ --
---------------- ------------ -
----- ---- ----------- - -
------- ---------
-------- -
-- ------- -----
--------------- ------------------
--
------- -
-- ------ ---------
----- -
-
--
------ ------------------------------------ -----
-
-- --------
----------- ------------ -
------ -----------------------------------
-
-- -----
--------------- ----- ------------ -
-- ----
------ ----------------------
-
-总之，emiya-angular2-fetch 可以让你在 Angular 2 开发中快速进行网络请求操作，并可以通过拦截器、全局异常处理器等功能进行更加灵活的使用。希望本文对您学习前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ca563576b7b1ecc71