當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

rest api 示例2_REST API教程– REST Client，REST Service和API调用通过代码示例进行了解释

發(fā)布時(shí)間：2023/11/29 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 rest api 示例2_REST API教程– REST Client，REST Service和API调用通过代码示例进行了解释小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

rest api 示例2

Ever wondered how login/signup on a website works on the back-end? Or how when you search for "cute kitties" on YouTube, you get a bunch of results and are able to stream off of a remote machine?

有沒有想過網(wǎng)站上的登錄/注冊(cè)在后端如何工作？或者，當(dāng)您在YouTube上搜索“可愛的小貓”時(shí)，如何獲得大量結(jié)果并能夠流式傳輸?shù)竭h(yuǎn)程計(jì)算機(jī)？

In this beginner friendly guide, I will walk you through the process of setting up a RESTful API. We'll declassify some of the jargon and have a look at how we can code a server in NodeJS. Let's dive a bit deeper into JavaScript!

在本入門指南中，我將引導(dǎo)您完成設(shè)置RESTful API的過程。我們將解密一些術(shù)語，并看看如何在NodeJS中編碼服務(wù)器。讓我們更深入地研究JavaScript！

擺脫那個(gè)行話 (Get that jargon away)

So, what is REST? According to Wikipedia:

那么，什么是REST？根據(jù)維基百科：

Representational state transfer (REST) is a software architectural style that defines a set of constraints to be used for creating Web services. RESTful Web services allow the requesting systems to access and manipulate textual representations of Web resources by using a uniform and predefined set of stateless operations

代表性狀態(tài)轉(zhuǎn)移 ( REST )是一種軟件體系結(jié)構(gòu)樣式，它定義了一組用于創(chuàng)建Web服務(wù)的約束。 RESTful Web服務(wù)允許請(qǐng)求系統(tǒng)通過使用統(tǒng)一且預(yù)定義的無狀態(tài)操作集來訪問和操縱Web資源的文本表示形式

Let's demystify what that means (hopefully you got the full form). REST is basically a set of rules for communication between a client and server. There are a few constraints on the definition of REST:

讓我們揭開其含義的神秘面紗(希望您獲得了完整的表格)。 REST基本上是客戶端和服務(wù)器之間通信的一組規(guī)則。 REST的定義有一些限制：

Client-Server Architecture: the user interface of the website/app should be separated from the data request/storage, so each part can be scaled individually.

客戶端-服務(wù)器體系結(jié)構(gòu) ：網(wǎng)站/應(yīng)用程序的用戶界面應(yīng)與數(shù)據(jù)請(qǐng)求/存儲(chǔ)區(qū)分開，因此每個(gè)部分都可以單獨(dú)縮放。

Statelessness: the communication should have no client context stored on server. This means each request to the server should be made with all the required data and no assumptions should be made if the server has any data from previous requests.

無狀態(tài)性 ：通信不應(yīng)在服務(wù)器上存儲(chǔ)任何客戶端上下文。這意味著對(duì)服務(wù)器的每個(gè)請(qǐng)求都應(yīng)包含所有必需的數(shù)據(jù)，并且如果服務(wù)器具有來自先前請(qǐng)求的任何數(shù)據(jù)，則不應(yīng)進(jìn)行任何假設(shè)。

Layered system: client should not be able to tell if it is communicating directly with the server or some intermediary. These intermediary servers (be it proxy or load balancers) allow for scalability and security of the underlying server.

分層系統(tǒng) ：客戶端不應(yīng)該知道客戶端是否直接與服務(wù)器或某些中介進(jìn)行通信。這些中間服務(wù)器(無論是代理服務(wù)器還是負(fù)載平衡器)都可以實(shí)現(xiàn)基礎(chǔ)服務(wù)器的可伸縮性和安全性。

Okay, so now that you know what RESTful services are, here are some of the terms used in the heading:

好的，現(xiàn)在您知道什么是RESTful服務(wù)，下面是該標(biāo)題中使用的一些術(shù)語：

REST Client: code or an app that can access these REST services. You are using one right now! Yes, the browser can act as an uncontrolled REST client (the website handles the browser requests). The browser, for a long time, used an in-built function called XMLHttpRequest for all REST requests. But, this was succeeded by FetchAPI, a modern, promise based approach to requests. Others examples are code libraries like axios, superagent and got or some dedicated apps like Postman (or an online version, postwoman!), or a command line tool like cURL!.

REST客戶端 ：可以訪問這些REST服務(wù)的代碼或應(yīng)用程序。您正在使用一個(gè)！是的，瀏覽器可以充當(dāng)不受控制的REST客戶端(網(wǎng)站處理瀏覽器請(qǐng)求)。很長時(shí)間以來，瀏覽器對(duì)所有REST請(qǐng)求都使用了一個(gè)名為XMLHttpRequest的內(nèi)置函數(shù)。但是，這是通過FetchAPI成功實(shí)現(xiàn)的， FetchAPI是一種基于請(qǐng)求的現(xiàn)代承諾方法。其他示例包括諸如axios ， superagent和got之類的代碼庫，或諸如Postman (或在線版本， postwoman ！)之類的一些專用應(yīng)用程序，或諸如cURL ！之類的命令行工具。

REST Service: the server. There are many popular libraries that make creation of these servers a breeze, like ExpressJS for NodeJS and Django for Python.

REST服務(wù) ：服務(wù)器。有許多流行的庫使創(chuàng)建這些服務(wù)器變得輕而易舉，例如ExpressJS for NodeJS和Django for Python。

REST API: this defines the endpoint and methods allowed to access/submit data to the server. We will talk about this in great detail below. Other alternatives to this are: GraphQL, JSON-Pure and oData.

REST API ：這定義了允許訪問/向服務(wù)器提交數(shù)據(jù)的端點(diǎn)和方法。我們將在下面詳細(xì)討論。其他替代方法是：GraphQL，JSON-Pure和oData。

所以現(xiàn)在告訴我，REST看起來如何？ (So tell me now, how does REST look?)

In very broad terms, you ask the server for a certain data or ask it to save some data, and the server responds to the requests.

概括地說，您要求服務(wù)器提供某些數(shù)據(jù)或要求它保存一些數(shù)據(jù)，然后服務(wù)器會(huì)響應(yīng)請(qǐng)求。

In programming terms, there is an endpoint (a URL) that the server is waiting to get a request. We connect to that endpoint and send in some data about us (remember, REST is stateless, no data about the request is stored) and the server responds with the correct response.

用編程的術(shù)語來說，有一個(gè)端點(diǎn)(URL)，服務(wù)器正在等待獲取請(qǐng)求。我們連接到該端點(diǎn)并發(fā)送有關(guān)我們的一些數(shù)據(jù)(請(qǐng)記住，REST是無狀態(tài)的，沒有存儲(chǔ)有關(guān)請(qǐng)求的數(shù)據(jù))，并且服務(wù)器以正確的響應(yīng)進(jìn)行響應(yīng)。

Words are boring, let me give you a demonstration. I will be using Postman to show you the request and response:

話無聊，讓我給你示范。我將使用郵差向您顯示請(qǐng)求和響應(yīng)：

The returned data is in JSON (JavaScript Object Notation) and can be accessed directly.

返回的數(shù)據(jù)采用JSON(JavaScript對(duì)象表示法)格式，可以直接訪問。

Here, https://official-joke-api.appspot.com/random_joke is called an endpoint of an API. There will be a server listening on that endpoint for requests like the one we made.

在這里， https://official-joke-api.appspot.com/random_joke稱為API的端點(diǎn)。將會(huì)有一個(gè)服務(wù)器在該端點(diǎn)上偵聽類似我們發(fā)出的請(qǐng)求。

REST的剖析： (Anatomy of REST:)

Alright, so now we know that data can be requested by the client and the server will respond appropriately. Let's look deeper into how a request is formed.

好了，現(xiàn)在我們知道客戶端可以請(qǐng)求數(shù)據(jù)了，服務(wù)器將做出適當(dāng)?shù)捻憫?yīng)。讓我們更深入地了解請(qǐng)求的形成方式。

Endpoint: I have already told you about this. For a refresher, it is the URL where the REST Server is listening.

端點(diǎn) ：我已經(jīng)告訴過你了。對(duì)于復(fù)習(xí)，它是REST Server偵聽的URL。

Method: Earlier, I wrote that you can either request data or modify it, but how will the server know what kind of operation the client wants to perform? REST implements multiple 'methods' for different types of request, the following are most popular:

方法：之前，我寫道您可以請(qǐng)求數(shù)據(jù)或?qū)ζ溥M(jìn)行修改，但是服務(wù)器如何知道客戶端要執(zhí)行哪種操作？ REST為不同類型的請(qǐng)求實(shí)現(xiàn)了多種“方法”，以下是最受歡迎的方法：

GET: Get resource from the server.

GET ：從服務(wù)器獲取資源。

POST: Create resource to the server.

POST ：為服務(wù)器創(chuàng)建資源。

PATCH or PUT: Update existing resource on the server.

PATCH或PUT ：更新服務(wù)器上的現(xiàn)有資源。

DELETE: Delete existing resource from the server.

刪除：從服務(wù)器刪除現(xiàn)有資源。

DELETE: Delete existing resource from the server.

刪除：從服務(wù)器刪除現(xiàn)有資源。

Headers: The additional details provided for communication between client and server (remember, REST is stateless). Some of the common headers are:

標(biāo)頭 ：為客戶端和服務(wù)器之間的通信提供的其他詳細(xì)信息(請(qǐng)記住，REST是無狀態(tài)的)。一些常見的標(biāo)頭是：

Headers: The additional details provided for communication between client and server (remember, REST is stateless). Some of the common headers are:Request:

標(biāo)頭 ：為客戶端和服務(wù)器之間的通信提供的其他詳細(xì)信息(請(qǐng)記住，REST是無狀態(tài)的)。一些常見的標(biāo)頭是： 請(qǐng)求：

host: the IP of client (or from where request originated)

host ：客戶端的IP(或發(fā)出請(qǐng)求的源)

accept-language: language understandable by the client

接受語言：客戶可以理解的語言

user-agent: data about client, operating system and vendor

用戶代理：有關(guān)客戶端，操作系統(tǒng)和供應(yīng)商的數(shù)據(jù)

user-agent: data about client, operating system and vendorResponse:

用戶代理：有關(guān)客戶端，操作系統(tǒng)和供應(yīng)商的數(shù)據(jù)響應(yīng) ：

status: the status of request or HTTP code.

status ：請(qǐng)求或HTTP代碼的狀態(tài)。

content-type: type of resource sent by server.

content-type ：服務(wù)器發(fā)送的資源類型。

set-cookie: sets cookies by server

set-cookie ：按服務(wù)器設(shè)置cookie

Data: (also called body or message) contains info you want to send to the server.

數(shù)據(jù) ：(也稱為正文或消息)包含要發(fā)送到服務(wù)器的信息。

足夠的細(xì)節(jié)-給我看代碼。 (Enough with the details – show me the code.)

Let's begin coding a REST Service in Node. We will be implementing all the things we learnt above. We will also be using ES6+ to write our service in.

讓我們開始在Node中編碼REST服務(wù)。我們將實(shí)現(xiàn)上面學(xué)到的所有東西。我們還將使用ES6 +編寫服務(wù)。

Make sure you have Node.JS installed and node and npm are available in your path. I will be using Node 12.16.2 and NPM 6.14.4.

確保已安裝Node.JS，并且路徑中的node和npm都可用。我將使用節(jié)點(diǎn)12.16.2和NPM 6.14.4。

Create a directory rest-service-node and cd into it:

創(chuàng)建一個(gè)目錄rest-service-node并進(jìn)入cd：

mkdir rest-service-node cd rest-service-node

Initialize the node project:

初始化節(jié)點(diǎn)項(xiàng)目：

npm init -y

The -y flag skips all the questions. If you want to fill in the whole questionnaire, just run npm init.

-y標(biāo)志跳過所有問題。如果要填寫整個(gè)問卷，只需運(yùn)行npm init 。

Let's install some packages. We will be using the ExpressJS framework for developing the REST Server. Run the following command to install it:

讓我們安裝一些軟件包。我們將使用ExpressJS框架來開發(fā)REST Server。運(yùn)行以下命令進(jìn)行安裝：

npm install --save express body-parser

What's body-parser there for? Express, by default, is incapable of handling data sent via POST request as JSON. body-parser allows Express to overcome this.

body-parser有什么用？默認(rèn)情況下，Express無法處理通過POST請(qǐng)求以JSON格式發(fā)送的數(shù)據(jù)。 body-parser使Express可以克服這一問題。

Create a file called server.js and add the following code:

創(chuàng)建一個(gè)名為server.js的文件，并添加以下代碼：

const express = require("express"); const bodyParser = require("body-parser");const app = express();app.use(bodyParser.json());app.listen(5000, () => {console.log(`Server is running on port 5000.`); });

The first two lines are importing Express and body-parser.

前兩行將導(dǎo)入Express和body-parser。

Third line initializes the Express server and sets it to a variable called app.

第三行初始化Express服務(wù)器并將其設(shè)置為名為app的變量。

The line, app.use(bodyParser.json()); initializes the body-parser plugin.

該行app.use(bodyParser.json()); 初始化body-parser插件。

Finally, we are setting our server to listen on port 5000 for requests.

最后，我們將服務(wù)器設(shè)置為在端口5000上偵聽請(qǐng)求。

從REST服務(wù)器獲取數(shù)據(jù)： (Getting data from the REST Server:)

To get data from a server, we need a GET request. Add the following code before app.listen:

要從服務(wù)器獲取數(shù)據(jù)，我們需要一個(gè)GET請(qǐng)求。在app.listen之前添加以下代碼：

const sayHi = (req, res) => {res.send("Hi!"); };app.get("/", sayHi);

We have created a function sayHi which takes two parameters req and res (I will explain later) and sends a 'Hi!' as response.

我們創(chuàng)建了一個(gè)函數(shù)sayHi ，它帶有兩個(gè)參數(shù)req和res (我將在后面解釋)并發(fā)送一個(gè)“ Hi！”。作為回應(yīng)。

app.get() takes two parameters, the route path and function to call when the path is requested by the client. So, the last line translates to: Hey server, listen for requests on the '/' (think homepage) and call the sayHi function if a request is made.

app.get()具有兩個(gè)參數(shù)，即路由路徑和客戶端請(qǐng)求路徑時(shí)要調(diào)用的函數(shù)。因此，最后一行轉(zhuǎn)換為：嘿，服務(wù)器，在“ /”(想想主頁)上偵聽請(qǐng)求，并在發(fā)出請(qǐng)求時(shí)調(diào)用sayHi函數(shù)。

app.get also gives us a request object containing all the data sent by the client and a response object which contains all the methods with which we can respond to the client. Though these are accessible as function parameters, the general naming convention suggests we name them res for response and req for request.

app.get還為我們提供了一個(gè)request對(duì)象，其中包含客戶端發(fā)送的所有數(shù)據(jù)，以及一個(gè)response對(duì)象，其中包含我們可以用來響應(yīng)客戶端的所有方法。盡管可以將它們作為函數(shù)參數(shù)進(jìn)行訪問，但一般的命名約定建議我們將它們分別命名為res代表response ， req代表request 。

Enough chatter. Let's fire up the server! Run the following server:

chat不休。讓我們啟動(dòng)服務(wù)器！運(yùn)行以下服務(wù)器：

node server.js

If everything is successful, you should see a message on console saying: Server is running on port 5000.

如果一切順利，您應(yīng)該在控制臺(tái)上看到一條消息：服務(wù)器正在端口5000上運(yùn)行。

Note: You can change the port to whatever number you want.

注意：您可以將端口更改為所需的任何數(shù)字。

Open up your browser and navigate to http://localhost:5000/ and you should see something like this:

打開瀏覽器并導(dǎo)航到http://localhost:5000/ ，您應(yīng)該看到類似以下內(nèi)容：

There you go! Your first GET request was successful!

你去！您的第一個(gè)GET請(qǐng)求成功！

將數(shù)據(jù)發(fā)送到REST服務(wù)器： (Sending data to REST Server:)

As we have discussed earlier, let's setup how we can implement a POST request into our server. We will be sending in two numbers and the server will return the sum of the numbers. Add this new method below the app.get :

如前所述，讓我們?cè)O(shè)置如何在服務(wù)器中實(shí)現(xiàn)POST請(qǐng)求。我們將發(fā)送兩個(gè)數(shù)字，服務(wù)器將返回?cái)?shù)字的總和。在app.get下面添加此新方法：

app.post("/add", (req, res) => {const { a, b } = req.body;res.send(`The sum is: ${a + b}`); });

Here, we will be sending the data in JSON format, like this:

在這里，我們將以JSON格式發(fā)送數(shù)據(jù)，如下所示：

{"a":5,"b":10 }

Let's get over the code:

讓我們看一下代碼：

On line 1, we are invoking the .post() method of ExpressJS, which allows the server to listen for POST requests. This function takes in the same parameters as the .get() method. The route that we are passing is /add, so one can access the endpoint as http://your-ip-address:port/add or in our case localhost:5000/add. We are inlining our function instead of writing a function elsewhere.

在第1行，我們正在調(diào)用。 ExpressJS的post()方法，該方法允許服務(wù)器偵聽POST請(qǐng)求。該函數(shù)采用與.get()方法相同的參數(shù)。我們傳遞的路由是/add ，因此可以訪問端點(diǎn)作為http://your-ip-address:port/add ，在我們的示例中是localhost:5000/add 。我們內(nèi)聯(lián)函數(shù)，而不是在其他地方編寫函數(shù)。

On line 2, we have used a bit of ES6 syntax, namely, object destructuring. Whatever data we send via the request gets stored and is available in the body of the req object. So essentially, we could've replaced line 2 with something like:

在第2行中，我們使用了一些ES6語法，即對(duì)象分解。我們通過請(qǐng)求發(fā)送的任何數(shù)據(jù)都將存儲(chǔ)起來，并在req對(duì)象的body中可用。因此，從本質(zhì)上講，我們可以將第2行替換為：

const num1 = req.body.a; const num2 = req.body.b;

On line 3, we are using the send() function of the res object to send the result of the sum. Again, we are using template literals from ES6. Now to test it (using Postman):

在第3行中，我們使用res對(duì)象的send()函數(shù)發(fā)送求和結(jié)果。同樣，我們使用ES6中的模板文字。現(xiàn)在進(jìn)行測(cè)試(使用Postman)：

So we have sent the data 5 and 10 as a and b using them as the body. Postman attaches this data to the request and sends it. When the server receives the request, it can parse the data from req.body , as we did in the code above. The result is shown below.

因此，我們已將數(shù)據(jù)5和10作為a和b發(fā)送，并使用它們作為正文。郵遞員將此數(shù)據(jù)附加到請(qǐng)求并發(fā)送。當(dāng)服務(wù)器接收到請(qǐng)求時(shí)，它可以像上面的代碼一樣解析來自req.body的數(shù)據(jù)。結(jié)果如下所示。

Alright, the final code:

好了，最后的代碼：

REST客戶端： (REST Client:)

Okay, we have created a server, but how do we access it from our website or webapp? Here the REST client libraries will come in handy.

好的，我們已經(jīng)創(chuàng)建了服務(wù)器，但是如何從我們的網(wǎng)站或Web應(yīng)用程序訪問它呢？ REST客戶端庫將在這里派上用場(chǎng)。

We will be building a webpage which will contain a form, where you can enter two numbers and we will display the result. Let's start.

我們將構(gòu)建一個(gè)包含表單的網(wǎng)頁，您可以在其中輸入兩個(gè)數(shù)字并顯示結(jié)果。開始吧。

First, let's change the server.js a bit:

首先，讓我們更改一下server.js ：

We imported a new package path, which is provided by Node, to manipulate path cross-platform. Next we changed the GET request on '/' and use another function available in res, ie. sendFile, which allows us to send any type of file as response. So, whenever a person tries to navigate to '/', they will get our index.html page.

我們導(dǎo)入了Node提供的新程序包path ，以操縱跨平臺(tái)的路徑。接下來，我們更改'/'上的GET請(qǐng)求，并使用res可用的另一個(gè)函數(shù)，即。 sendFile ，它允許我們發(fā)送任何類型的文件作為響應(yīng)。因此，每當(dāng)有人嘗試導(dǎo)航到“ /”時(shí)，他們都會(huì)獲得我們的index.html頁面。

Finally, we changed our app.post function to return the sum as JSON and convert both a and b to integers.

最后，我們更改了app.post函數(shù)以將總和作為JSON返回，并將a和b都轉(zhuǎn)換為整數(shù)。

Let's create an html page, I will call it index.html, with some basic styling:

讓我們創(chuàng)建一個(gè)html頁面，我將其稱為index.html ，具有一些基本樣式：

Let's add a script tag just before the closing body tag, so we don't need to maintain a .js file. We will begin by listening for the submit event and call a function accordingly:

讓我們?cè)诮Y(jié)束body標(biāo)記之前添加一個(gè)script標(biāo)記，所以我們不需要維護(hù).js文件。我們將從偵聽submit事件開始，并相應(yīng)地調(diào)用一個(gè)函數(shù)：

First we need to prevent page refresh when the 'Add' button is clicked. This can be done using the preventDefault() function. Then, we will get the value of the inputs at that instant:

首先，我們需要在單擊“添加”按鈕時(shí)防止頁面刷新。可以使用preventDefault()函數(shù)來完成。然后，我們將在那一刻獲得輸入的值：

function sendData(e) {e.preventDefault();const a = document.querySelector("#num1").value;const b = document.querySelector("#num2").value; }

Now we will make the call to the server with both these values a and b. We will be using the Fetch API, built-in to every browser for this.

現(xiàn)在，我們將使用這兩個(gè)值a和b調(diào)用服務(wù)器。我們將為此使用每個(gè)瀏覽器內(nèi)置的Fetch API 。

Fetch takes in two inputs, the URL endpoint and a JSON request object and returns a Promise. Explaining them here will be out-of-bounds here, so I'll leave that for you.

Fetch接受兩個(gè)輸入，即URL端點(diǎn)和JSON請(qǐng)求對(duì)象，并返回Promise 。在這里解釋它們將超出范圍，因此我將留給您。

Continue inside the sendData() function:

繼續(xù)在sendData()函數(shù)內(nèi)部：

fetch("/add", {method: "POST",headers: {Accept: "application/json","Content-Type": "application/json"},body: JSON.stringify({a: parseInt(a),b: parseInt(b)})}).then(res => res.json()).then(data => {const {result} = data;document.querySelector(".result").innerText = `The sum is: ${result}`;}).catch(err => console.log(err));

First we are passing the relative URL of the endpoint as the first parameter to fetch. Next, we are passing an object which contains the method we want Fetch to use for the request, which is POST in this case.

首先，我們將端點(diǎn)的相對(duì)URL作為要fetch的第一個(gè)參數(shù)。接下來，我們傳遞一個(gè)對(duì)象，該對(duì)象包含希望Fetch用于請(qǐng)求的方法，在這種情況下為POST 。

We are also passing headers, which will provide information about the type of data we are sending (content-type) and the type of data we accept as response (accept).

我們還將傳遞headers ，該headers將提供有關(guān)我們正在發(fā)送的數(shù)據(jù)類型( content-type )和我們接受作為響應(yīng)的數(shù)據(jù)類型( accept )的信息。

Next we pass body. Remember we typed the data as JSON while using Postman? We're doing kind of a similar thing here. Since express deals with string as input and processes it according to content-type provided, we need to convert our JSON payload into string. We do that with JSON.stringify(). We're being a little extra cautious and parsing the input into integers, so it doesn't mess up our server (since we haven't implemented any data-type checking).

接下來我們傳遞body 。還記得我們?cè)谑褂肞ostman時(shí)將數(shù)據(jù)鍵入為JSON嗎？我們?cè)谶@里做類似的事情。由于express將字符串作為輸入處理，并根據(jù)提供的內(nèi)容類型對(duì)其進(jìn)行處理，因此我們需要將JSON有效負(fù)載轉(zhuǎn)換為字符串。我們使用JSON.stringify()做到這JSON.stringify() 。我們要格外謹(jǐn)慎，將輸入解析為整數(shù)，這樣就不會(huì)弄亂我們的服務(wù)器(因?yàn)槲覀冞€沒有實(shí)現(xiàn)任何數(shù)據(jù)類型檢查)。

Finally, if the promise (returned by fetch) resolves, we will get that response and convert it into JSON. After that, we will get the result from the data key returned by the response. Then we are simply displaying the result on the screen.

最后，如果promise(通過獲取返回)得到解決，我們將獲得該響應(yīng)并將其轉(zhuǎn)換為JSON。之后，我們將從響應(yīng)返回的data鍵中獲取結(jié)果。然后，我們只是在屏幕上顯示結(jié)果。

At the end, if the promise is rejected, we will display the error message on the console.

最后，如果承諾被拒絕，我們將在控制臺(tái)上顯示錯(cuò)誤消息。

Here's the final code for index.html:

這是index.html的最終代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>REST Client</title></head><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {height: 100vh;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";display: flex;flex-direction: column;justify-content: center;align-items: center;}form {display: flex;flex-direction: column;margin-bottom: 20px;}label,input[type="submit"] {margin-top: 20px;}</style><body><div class="container"><h1>Simple POST Form</h1></h1><form><label>Number 1:</label><input id="num1" type="number" /><label>Number 2:</label><input id="num2" type="number" /><input type="submit" value="Add"/></form><div class="result">Click Add!</div></div><script>document.addEventListener("submit", sendData);function sendData(e) {e.preventDefault();const a = document.querySelector("#num1").value;const b = document.querySelector("#num2").value;fetch("/add", {method: "POST",headers: {Accept: "application/json","Content-Type": "application/json"},body: JSON.stringify({a: parseInt(a),b: parseInt(b)})}).then(res => res.json()).then(data => {const { result } = data;document.querySelector(".result").innerText = `The sum is: ${result}`;}).catch(err => console.log(err));}</script></body> </html>

I have spun up a little app on glitch for you to test.

我已經(jīng)啟動(dòng)了一個(gè)小故障小應(yīng)用程序供您測(cè)試。

結(jié)論： (Conclusion:)

So in this post, we learnt about REST architecture and the anatomy of REST requests. We worked our way through by creating a simple REST Server that serves GET and POST requests and built a simple webpage that uses a REST Client to display the sum of two numbers.

因此，在這篇文章中，我們了解了REST體系結(jié)構(gòu)和REST請(qǐng)求的結(jié)構(gòu)。我們通過創(chuàng)建一個(gè)簡單的REST服務(wù)器來處理GET和POST請(qǐng)求，并構(gòu)建了一個(gè)使用REST Client顯示兩個(gè)數(shù)字之和的簡單網(wǎng)頁，從而完成了工作。

You can extend this for the remaining types of requests and even implement a full featured back-end CRUD app.

您可以將其擴(kuò)展為其余類型的請(qǐng)求，甚至實(shí)現(xiàn)功能齊全的后端CRUD應(yīng)用程序。

I hope you have learned something from this. If you have any questions, feel free to reach out to me over twitter! Happy Coding!

希望您從中學(xué)到了一些東西。如果您有任何疑問，請(qǐng)隨時(shí)通過Twitter與我聯(lián)系！編碼愉快！

翻譯自: https://www.freecodecamp.org/news/rest-api-tutorial-rest-client-rest-service-and-api-calls-explained-with-code-examples/