API 的使用在编程中是必不可少的。 从数据解释的角度来看，这些是两个应用程序之间最关键的层。 本文解释了如何制作一个并在你的 React 应用程序中使用它。
API = Application Programming Interface
首先，我们需要一个简单的应用程序作为我们的“编程接口”。 此应用程序将只能发送一个响应对象； 它将无法管理或更改数据。 响应将是
{n message: 'Awesome!'n}
我们还需要在计算机上安装一些东西，但别担心——它们以后仍然会有所帮助！
好的，回到我们的 API。 对于此任务，将使用 TypeScript。 要对其进行测试，请在文件夹中创建一个新的 TypeScript 文件，在代码编辑器中打开它，然后在其中添加一行。
FIRST OF ALL CREATE YOUR TYPESCRIPT FILE AND ADD A SIMPLE LOGnmy-first-api/index.tsnconsole.log('Test!')
现在我们必须以某种方式使用它，nodemon 进入了场景。 nodemon CLI 应用程序在您的终端中无限运行 JavaScript 和 TypeScript，并在您的代码更改时重新启动它们。
所以让我们安装一些新的包来运行你的 TypeScript 文件！ 首先，我们当然需要支持 TypeScript 的 nodemon：
INSTALL REQUIRED DEPENDENCIESnnpm i -g nodemon ts-node
然后将 tsconfig.json 文件添加到文件夹的根目录以处理 TypeScript 功能并使用以下内容对其进行更新，以便能够使用 console.log() 函数：
BE AWARE OF THE CONFIGURATIONn{n "compilerOptions": {n "lib": [ "dom" ]n }n}
在您的终端中输入 nodemon index.ts 后，您将看到您的日志
TEST WORKS OUT JUST FINEnnodemon index.tsn'Test!'
伟大的！ 我们的代码现在需要更新为 API。 我们需要一个 API 调用控制器，在我们的例子中，它将是 express 库，所以我们需要安装它。 但首先，要在我们的文件夹中安装库，我们必须首先创建和更新 package.json 文件。
CREATE AND UPDATE package.json FILEnmy-first-api/package.jsonn{n "name": "my-first-api",n "version": "1.0.0",n "dependencies": {n }n}
并安装快递
INSTALL EXPRESS & DEVELOPER DEPENDENCIESnnpm i expressnnpm i --save-dev @types/node
现在我们有了创建 API 的库，我们必须在文件中定义它是一个快速应用程序
DEFINE EXPRESS IN OUR TYPESCRIPT FILEnconst express = require('express')nconst app = express()nconst port = 3000napp.listen(port, () => {n console.log('App is listening on port', port)n})
这意味着我们定义了 express，创建了一个 express 应用程序，并定义了一个通信端口。 app上的listen函数基本上是启动API。
In order to ensure that our API runs indefinitely, we use nodemon to launch it. Otherwise, we won't be able to interact with it.
为了继续前进，我们必须指定当我们调用我们的 API 时，我们要发送一条消息
DEFINE THE MESSAGEnconst express = require('express')nconst app = express()nconst port = 3000napp.listen(port, () => {n console.log('App is listening on port', port)n})napp.get('/', (req, res) => {n res.send({n message: 'Awesome!'n })n})
上面的代码只是暗示你想在“/”路径（这是根端点）上从你的应用程序中获取信息，并且你想使用 res 发送的消息（如响应）是一个对象：
{n message: 'Awesome!'n}
繁荣。 您的 API 可以正常工作。 它在您的本地主机上运行，因为您是从终端启动它的，因此您可以使用该地址和您已经在应用程序中提供的端口号访问它，如下所示：
TYPE THIS ADDRESS INTO YOUR WEB BROWSER BAR AND SEE WHAT HAPPENSnlocalhost:3000
您的消息将以纯文本形式出现在浏览器中。 太棒了，对吧？ 因此，您现在可以在 API 中定义任何端点并从浏览器访问它。
我希望你发现这对你寻找新的学习材料很有用。 感谢您抽出时间来阅读！
关注七爪网，获取更多APP/小程序/网站源码资源！
