ember-fetch 是一个基于 fetch 规范的轻量级网络请求库，适用于 Ember.js 前端框架。它支持 Promise API、拦截器、请求和响应转换器等功能。本文将介绍如何安装和使用 ember-fetch。
安装
在命令行窗口中，输入如下命令安装
ember-fetch：npm install --save-dev ember-fetch
在
Brocfile.js文件中添加如下代码：app.import('node_modules/ember-fetch/dist/ember-fetch.js');
使用步骤
使用 ember-fetch 处理网络请求，需要运用它提供的 fetch 方法，其中可以定义拦截器、请求和响应转换器。下面将讲解具体的使用步骤。
1. Import
import fetch from 'fetch'; import Ember from 'ember';
首先，我们需要声明 fetch 对象是从 ember-fetch 中导出的，可以通过 ES6 的 import 语法进行导入。此外，我们还需要导入 Ember 框架。
2. 发送请求
fetch('/api/users')
.then(response => response.json())
.then(data => {
Ember.Logger.log(data);
})
.catch(error => {
Ember.Logger.error(error);
});通过 fetch 方法，我们可以向服务器发送请求。在这个例子中，我们向 /api/users 发送了一个 GET 请求，并且在获取到响应后，将响应转换成 JSON。最后，使用 Ember 的 Logger 输出响应数据。如果请求失败了，我们使用 catch 来输出错误。fetch 返回一个 Promise 对象。
3. 使用拦截器
-- -------------------- ---- -------
------------------------------------ -------- -- -
----- --------- - -----------------------------------
-- ----------- -
-------------------------------- - ------- --------------
-
------ ----- ---------
---
---------------------------------------- -- -
-- ---------------- --- ---- -
--------------------------------------------------------
-
------ ---------
---通过拦截器，我们可以在请求发送和响应返回时对数据进行预处理。在这个例子中，我们定义了一个请求拦截器，在请求被发送之前，从本地存储中获取鉴权令牌，并将其添加到请求头中。
在响应拦截器中，我们判断响应状态是否是 401（未授权），如果是，我们将调用当前 Ember 实例的 SessionService 来退出登录。拦截器通过 use 方法添加。
4. 使用请求和响应转换器
-- -------------------- ---- -------
------------------------------- - ------- -------- -- -
-- ------------------------ --- ---------------------- -
------ -----
-
------ ---------------------
---
-------------------------------- - --------- -- -
------ ----------------
---如果您需要在请求发送和响应返回时对数据进行转换，可以使用 transformRequest 和 transformResponse 方法。在这个例子中，我们定义了一个请求转换器，如果请求头中的 Content-Type 是 multipart/form-data，则直接返回数据。否则，将数据转换为 JSON 字符串。
在响应转换器中，我们将接收到的响应转换成一个 Promise，Promise 的返回值为 JSON 对象。
示例代码
下面是一个完整的例子代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
-- -----
------------------------------------ -------- -- -
----- --------- - -----------------------------------
-- ----------- -
-------------------------------- - ------- --------------
-
------ ----- ---------
---
-- -----
---------------------------------------- -- -
-- ---------------- --- ---- -
--------------------------------------------------------
-
------ ---------
---
-- -----
------------------------------- - ------- -------- -- -
-- ------------------------ --- ---------------------- -
------ -----
-
------ ---------------------
---
-- -----
-------------------------------- - --------- -- -
------ ----------------
---
-- ----
-------------------
-------------- -- ----------------
---------- -- -
-----------------------
--
------------ -- -
--------------------------
---总结
ember-fetch 是一个方便、灵活的网络请求库，支持 Promise API、拦截器、请求和响应转换器等功能。在开发 Ember.js 前端应用时，使用 ember-fetch 可以让我们更加方便地发送网络请求，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59722