调用自定义api_如何为api调用编写自定义usefetch挂钩

调用自定义api

A walk-through with React’s useState, useEffect and useCallback

React的useState，useEffect和useCallback演练

In modern web applications, data and functionality is frequently accessible through REST APIs. As simple as it sounds, sending requests turns quite quickly from one line of code to dozens of lines:

在现代Web应用程序中，经常可以通过REST API访问数据和功能。 听起来很简单，发送请求很快就从一行代码变成几十行：

1. Call API endpoint using the fetch() function
   使用fetch()函数调用API端点
2. Check for response status code (e.g. 200 = Success, 404 = Not found, …)
   检查响应状态代码(例如200 =成功，404 =未找到，…)
3. Extract json body from response
   从响应中提取json主体
4. Catch potential errors in a try/catch block
   在try / catch块中捕获潜在的错误
5. Put all of this in an useEffect hook (and work around the fact that useEffect only takes synchronous functions while fetch is an asynchronous one…)
   将所有这些都放入useEffect挂钩中(并解决以下事实：useEffect仅采用同步函数，而fetch是异步函数…)

As you can imagine, it requires some effort to apply all these steps consistently. Sometimes I omitted catching the error, other times forgot checking the response code before extracting, etc. So I set out to write a custom hook performing all these steps. There were several challenges on the way. Finding solutions taught me a lot about hooks. With this blog post, I want to share both the problems I encountered as well as how to solve them.

您可以想象，需要付出一些努力才能一致地应用所有这些步骤。 有时，我忽略了捕获错误，有时却忘记了提取前检查响应代码，等等。因此，我着手编写执行所有这些步骤的自定义挂钩。 路上遇到了一些挑战。 寻找解决方案教会了我很多有关钩子的知识。 通过这篇博客，我想分享我遇到的问题以及如何解决它们。

初始点 (Starting point)

Before I started extracting the functionality into a hook, code similar to this was repeated in several components:

在开始将功能提取到挂钩中之前，在以下几个组件中重复了与此类似的代码：

I’ll use this example throughout the blog post and explain the purpose of the individual blocks (familiarity with state hook, effect hook and React in general are expected). Since the API is open to anyone, you can follow along and replicate each step. The component will return a random image from the fantastic Dog API 🐶:

我将在整个博客文章中使用此示例，并说明各个块的用途(通常应该熟悉状态钩子，效果钩子和React)。 由于该API向任何人开放，因此您可以遵循并复制每个步骤。 该组件将从奇妙的Dog API return返回随机图像：

Note that I’m using TypeScript — if you prefer JavaScript strip away the type definitions (e.g. string, interface blocks, …). For your convenience, the final hook is stored here in TypeScript and JavaScript.

请注意，我正在使用TypeScript —如果您更喜欢JavaScript，则应剥离类型定义(例如， string ， interface块等)。 为了方便起见，最后的钩子存储在TypeScript和JavaScript中 。

步骤1：定义自定义钩子 (Step 1: Define a custom hook)

The first step is to create a new file (e.g. useFetch.ts) and define a function that accepts URL and request parameters as inputs. By convention, hooks are prefixed with use:

第一步是创建一个新文件(例如useFetch.ts )并定义一个接受URL和请求参数作为输入的函数。 按照惯例，钩子前面带有use：