在前端开发中，我们经常会需要从服务器获取数据并进行展示。而获取数据的方式有很多，最常见的就是使用 AJAX 进行异步请求。而现在，有一种名为 fetch 的新型数据获取方式，它能够简化我们的代码，更加方便地获取数据。为了进一步简化代码，出现了一个针对商品数据获取的 npm 包，叫做 fetch-stitch-products 。本文将详细介绍 fetch-stitch-products 的使用方法。
安装
安装 fetch-stitch-products 对于 npm 用户来说非常简单，只需要在终端输入以下命令即可：
npm install fetch-stitch-products
使用方法
在安装了 fetch-stitch-products 之后，我们可以在前端代码中引入它。那么，如何使用它呢？接下来，我们将详细介绍 fetch-stitch-products 的使用方法，并使用一个示例 demo 来演示此过程。
引入 fetch-stitch-products
首先，在你的前端代码中引入 fetch-stitch-products ，代码如下所示：
const fetchProducts = require('fetch-stitch-products');这行代码的意思是：在你的代码中引入 fetch-stitch-products 并将其赋值给 fetchProducts。
准备配置信息
在使用 fetch-stitch-products 之前，你需要准备一些配置信息：
api_key：你的 API key，即 服务端配置中的 api_key ；app_id：你的应用 ID，即 服务端配置中的 app_id ；collection_name：集合名称，即 服务端配置中的集合名称；query：查询条件，即 服务端配置中的查询条件。
获取 api_key 与 app_id
首先，你需要到 MongoDB Stitch 官网进行注册，具体步骤如下：
- 打开 MongoDB Stitch 官网，并点击右上角的 "Sign Up for MongoDB Atlas" 按钮；
- 按照步骤注册，注册成功后，你会进入为自己新建一个集群的界面；
- 进入集群页面，点击左侧的 Stitch 按钮；
- 点击 Create New Application 按钮创建一个新的应用；
- 在创建的应用中选择 "Providers" ，点击下方的 "Add New Provider" 按钮添加一个新的 Provider（此处使用的是“匿名登录”）；
- 然后，你可以查看此 Provider 的设置信息，这里既包括了 API key 以及 app ID。
获取 collection_name
在 MongoDB Stitch 中，你可以创建多个集合，而这里的 collection_name 就是你要获取的集合的名称。
获取 query
query 表示你要获取的数据所满足的特定要求。在 MongoDB Stitch 中，你可以使用 MongoDB Query Operators 进行查询。例如，下面的代码用来查询表中所有价格大于 $200 的产品：
{
"price": { "$gt": 200 }
}你也可以直接写入服务端配置中的查询条件，例如：
{
"tags": "hot"
}调用 fetch-stitch-products
现在，我们已经学习了引入 fetch-stitch-products 和准备配置信息的步骤。接下来，我们将使用它来获取数据。
我们可以使用以下代码在前端获取商品数据：
fetchProducts(api_key, app_id, collection_name, query)
.then(products => {
console.log(products);
})
.catch(error => {
console.log(error);
});这段代码的意思是：使用 fetch-stitch-products 从 MongoDB Stitch 中获取专属于你的商品数据，并将结果输出到控制台。
完整的演示示例
前面的代码只是 fetch-stitch-products 的简单使用方法，下面我们将展示一个完整示例，包括了 fetch-stitch-products 以及前端展示数据的方法。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ -------- ------------
-------
------
-----------------
--- -------------------
--------
----- ------------- - ---------------------------------
----- ------- - ---------------
----- ------ - --------------
----- --------------- - -----------------------
----- ----- - -
------- -----
--
---------------------- ------- ---------------- ------
-------------- -- -
----- ----------- - ------------------------------------
------------------------ -- -
----- ---- - -----------------------------
---------------- - -------------
------------------------------
---
--
------------ -- -
-------------------
---
---------
-------
-------在这个示例中，我们首先引入了 fetch-stitch-products ，然后准备了 api_key 、 app_id 、 collection_name 和 query 。接着，我们调用 fetchProducts 方法，使用 Promise 对象进行数据的处理和展示。
总结
在本文中，我们介绍了 fetch-stitch-products 的使用方法，并展示了一个完整的前端 demo。使用 fetch-stitch-products 可以很方便地获取 MongoDB Stitch 中的商品数据，实现一个高效的数据请求和展示方案。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbce5