在 JavaScript 中使用 Fetch API 发布一个 JSON 对象

Fetch API 的 fetch() 方法允许你向服务器发送和接收 HTTP 响应和请求。

本文将讨论如何使用 fetch() 方法将 JSON 对象作为 POST 请求发送到服务器。

在 JavaScript 中使用 Fetch API 发布一个 JSON 对象

Fetch API 允许你访问和修改 HTTP 请求和响应。Fetch API 提供了 fetch() 方法，使你能够通过网络异步获取资源。

fetch() 方法有两个参数，url 和 options。

url 是发出请求的端点。options 是一个具有许多属性的对象，但这是一个可选参数。

你可以在 MDN 上了解有关 fetch() 方法的更多信息。

let jsonObj = {
    firstname: "Adam",
    lastname: "Smith",
    mob: [111111, 888888, 999999],
    address: {
        state: "Texas",
        country: "USA",
        pincode: 123456
    }
};

在这里，我们将首先创建一个名为 jsonObj 的对象。该对象将包含属性，例如名字、姓氏、地址等。

我们的目标是通过使用 fetch() 方法发出 POST 请求来将此对象发送到服务器。

我们将使用 httpbin.org，一个简单的 HTTP 请求和响应服务，作为后端服务器。由于我们没有任何后端服务器，我们将使用此服务并访问其 /post 端点以发出 POST 请求。

但是，如果你有一个带有 POST 路由的后端服务器，则可以使用该服务器。

首先，我们将创建一个变量 url 来存储 httpbin 后端服务器的 URL。之后，我们还必须定义一些 HTTP headers。

为此，我们必须创建一个对象。在这里，我们在对象中只定义了两个标头，Accept 和 Content-Type，它们的值是 application/json。

我们将这些标头的值设置为 application/json，因为我们将通过服务器发送 JSON 数据。最后，我们将包含标题的对象存储在名为 headers 的变量中，如下所示。

现在我们有了 jsonObj、url 和 headers，让我们创建一个函数 makePostRequest() 来执行 POST 请求并将 jsonObj 发送到服务器。我们将在这个函数中调用 fetch() 方法。

此方法将返回一个承诺。可能需要一些时间来解决；我们必须等到它使用 await 关键字解决。

我们还将使用 async 关键字使 makePostRequest() 函数成为异步函数。

let url = "https://httpbin.org/post";
let headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
};

async function makePostRequest(url, requestType, headers){
    await fetch(
        url,
        {
            method: requestType,
            headers: headers,
            body: JSON.stringify(jsonObj)
        },
    ).then(async rawResponse =>{
        var content = await rawResponse.json()
        console.log(content);
    });
}

makePostRequest(url, "POST", headers);

makePostRequest() 将采用三个参数，url、requestType 和 headers。我们已经创建了 url 和 headers 变量，我们将在调用此函数时将它们作为参数传递给此函数。

requestType 表示我们要执行的请求类型。由于我们希望发出 POST 请求，我们将把 POST 作为字符串传递给该函数。

正如我们已经看到的，fetch() 方法将采用两个参数。因此，我们直接将 url 作为第一个参数传递给 fetch() 方法。

我们将在第二个参数中传递另一个具有三个属性 method、headers 和 body 的对象。作为 method 属性的值将给出 requestType 变量，我们告诉浏览器执行 POST 请求。

在 headers 属性中，我们将分配我们创建的标题。这是重要的部分；在 body 属性中，我们必须传递我们创建的 jsonObj。

每当我们向服务器发送或接收任何数据时，数据都应采用特定格式。服务器和客户端之间传输数据的格式是 JSON 或 XML 格式。

但是这两种格式中最流行的是 JSON 字符串格式。我们不能直接发送通过执行 POST 请求创建的对象 jsonObj。

我们首先必须将此对象转换为字符串，然后我们才能将此对象发送到服务器。

要将 jsonObj 转换为字符串，我们必须将此对象传递给 JSON.stringify() 方法。此方法会将对象转换为字符串并为其分配 body 属性。

在 fetch() 方法返回的 promise 被解析后，我们会将响应打印到控制台中。我们将使用 then() 函数来执行此操作。

then() 函数将回调函数作为输入。fetch() 方法将返回一个原始响应，然后将这个原始响应传递给 then() 函数，then() 内部的回调函数将其作为参数。

在打印响应之前，我们将首先使用 json() 函数将其转换为 JSON。这可能需要一些时间才能将 rawResponse 转换回 JSON；我们将使用 await 关键字。

由于我们使用 await，我们必须使用 async 关键字使 then() 内的回调函数异步。

最后，我们将结果存储在 content 变量中，然后我们将在控制台上打印存储在变量中的数据，如上图所示。