在前端开发中，我们常常需要调用后端 API 来获取数据或者上传数据等操作。@stemn/sdk 是一个封装了 RESTful API 的前端 SDK，提供了一系列工具来帮助我们更方便地调用后端 API，并将 API 的返回数据转换成 JavaScript 对象，使得我们可以更加轻松地处理后端数据。
本篇文章将详细介绍 @stemn/sdk 的使用方法，并提供一些实际示例，帮助读者更轻松地学习和掌握该工具。
安装和引入
首先，我们需要在终端中通过 npm 安装 @stemn/sdk：
npm install @stemn/sdk
然后，我们可以通过以下方式引入该工具：
import StemnSDK from '@stemn/sdk' const sdk = new StemnSDK()
初始化
在引入 SDK 之后，我们需要通过 init 函数来初始化设置。该函数接受一个对象作为参数，包含了 API 的基础 URL，以及一些其他配置选项。示例如下：
sdk.init({ baseUrl: 'http://example.com/api', headers: { 'Authorization': 'Bearer ' + accessToken } })
接下来，我们就可以使用 SDK 提供的各种方法来读取和写入后端数据了。
获取数据
假设我们要获取一个用户的信息。首先，我们需要指定用户的 ID：
const userId = 123
然后，我们可以使用 SDK 的 get 方法来获取用户信息：
const user = await sdk.get('/users/' + userId) console.log(user)
上述代码会向后端发送一个 GET 请求，请求 URL 为 /users/123。当请求成功返回时，SDK 会将响应数据转换成 JavaScript 对象，并返回给我们。
如果我们要使用查询参数来过滤返回结果，可以将参数作为第二个参数传递给 get 方法：
const users = await sdk.get('/users', { is_active: true, updated_at__gte: '2022-01-01' }) console.log(users)
写入数据
如果我们需要写入后端数据，我们可以使用 SDK 的 post、put 和 patch 方法。这些方法的使用方法基本相同，只是请求类型不同。
例如，如果我们要向后端发送一个 POST 请求来创建一个新用户，我们可以这样写：
const data = { name: 'John Doe', email: 'john.doe@example.com' } await sdk.post('/users', data)
上述代码会向后端发送一个 POST 请求，请求 URL 为 /users，请求体为一个 JSON 对象，包含了新用户的信息。
如果我们要更新一个已存在的用户，可以使用 put 或 patch 方法：
const userId = 123 const newData = { name: 'Jane Doe' } await sdk.put('/users/' + userId, newData) // 或者 await sdk.patch('/users/' + userId, newData)
这些方法同样会向后端发送请求，不同的是 put 方法会将整个对象覆盖写入，而 patch 方法只会更新指定的字段。
错误处理
当向后端发送请求时，有可能会出现请求失败的情况。为了防止代码崩溃，我们需要对请求错误做一些处理。
例如，如果后端返回的 HTTP 状态码为 404，说明资源不存在，我们可以这样处理：
-- -------------------- ---- ------- --- - ----- ---- - ----- --------------------- ----------------- - ----- ------- - -- ------------- --- ---- - --------------------- - ---- - ------------------------ ------ - -展开代码
上述代码使用了 try-catch 语句来捕获请求错误。当请求成功返回时，SDK 会直接返回响应数据；而当请求失败时，SDK 会抛出一个错误对象。我们可以通过检查错误对象的 status 属性来判断错误类型，并进行特定的处理。
总结
@stemn/sdk 是一个非常有用的前端工具，它可以帮助我们更轻松地调用后端 API，并将返回数据转换成 JavaScript 对象。本篇文章介绍了该工具的安装和引入、初始化、获取数据、写入数据以及错误处理等方面，希望可以帮助读者更快速地学习和掌握该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66ece
