Javascript 获取示例：GET/POST/PUT/Delete

JavaScript Fetch API 提供了一个用于访问和操作 HTTP 请求和响应的接口。在本教程中，我们将创建一些示例，使用 JavaScriptfetch()方法发出 GET/POST/PUT/Delete 请求。最后一部分展示了一个简单的 Fetch HTTP 客户端，用于在 JavaScript 中与 REST API 交互并获取数据。

BezKoder网站有完整文章。

Javascript 获取概述

JavaScript Fetch API 提供了一个全局fetch()方法，用于异步地通过网络获取资源。
fetch()该方法返回一个 Promise，该 Promise 会解析为一个Response对象，并在响应可用时完成该对象。



const responsePromise = fetch(resourceUrl [, options]);

一个基本的获取请求如下所示：



fetch('/bezkoder.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Javascript 获取响应数据

我们上面提到的对象Response代表整个 HTTP 响应，它并不直接包含响应体。要获取实际的 JSON 响应体，我们使用以下方法：

response.arrayBuffer()：返回一个 Promise，该 Promise 会解析为一个ArrayBuffer.
response.blob()：返回一个 Promise，该 Promise 解析为一个Blob.
response.error()：返回与网络错误关联的新 Response 对象。
response.formData()：返回一个 Promise，该 Promise 解析为一个FormData.
response.json() : 返回一个 Promise，该 Promise 解析为 JSON 的结果。
response.text()：返回一个 Promise，该 Promise 会解析为一个文本。

Javascript 获取响应元数据

我们还可以从对象中访问元数据headers，例如status：statusTexttypeurlResponse



fetch('/bezkoder.com/data').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

获取错误处理

响应 Promise 不会因 HTTP 错误（例如：404`reject`、`reject` 500）而拒绝。它只会在遇到网络错误时拒绝。因此，我们必须使用 `reject`then()来检查 HTTP 错误及其response.ok状态和/或response.status属性。



fetch('/bezkoder.com/data')
  .then(function(response) {
    // if (response.status !== 200)
    if (!response.ok) {
       console.log('Error with Status Code: ' + response.status);
       return;
    }

    response.json().then(function(data) {
      console.log(data);
    });
  })
  .catch(function(err) {
    console.log('Error: ' + err);
  });

获取 try catch async-await

如果你想使用 async/await，只需将 fetch 调用用 try/catch 块包裹起来即可。



async function getData() {
  try {
    const response = await fetch('/bezkoder.com/data');

    if (!response.ok) {
      const message = 'Error with Status Code: ' + response.status;
      throw new Error(message);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error: ' + err);
  }
}

使用参数获取数据

您可以使用URL对象来URLSearchParams设置查询字符串参数。



let url = new URL('/bezkoder.com/data');
const params = { title: 'web'};
url.search = new URLSearchParams(params);

try {
  const response = await fetch(url);

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

这两者是等效的：



const response = await fetch('/bezkoder.com/data?title=web');

使用请求头获取数据。

要发送带有标头的 Fetch 请求，我们需要传递一个包含method和headers属性的选项对象。



const options = {
  method: 'get',
  headers: {
    "Content-Type": "application/json",
    "x-access-token": "token-value",
  }
};

try {
  const response = await fetch('/bezkoder.com/data', options);

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

Javascript 获取 POST

获取 POST 表单数据

让我们创建一个 POST 请求，并在请求中包含Formdata 。body



let formData = new FormData();
formData.append('title', 'BezKoder Tutorial');
formData.append('description', 'Tut Desc');

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    // headers: {
    //   "Content-Type": "application/x-www-form-urlencoded"
    // },
    body: formData
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

如果使用application/x-www-form-urlencoded，键和值将以键值对的形式进行编码。

获取 POST JSON

让我们创建一个包含 JSON 的 POST 请求。

我们JSON.stringify()在将对象传递给body请求之前对其进行处理，并将其设置application/json为标头Content-Type。



const postData = {
  title: title,
  description: description,
};

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(postData)
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

获取 POST 文件

处理文件的方式与之前类似，都是使用表单数据。



let formData = new FormData();
// formData.append('title', 'BezKoder Tutorial');
// formData.append('description', 'Tut Desc');
formData.append('file', file);

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    body: formData
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

我们不需要设置Content-Type标头multipart/form-data。浏览器会自动选择合适的内容类型标头，包括表单边界。

Javascript 获取 PUT

现在我们将生成一个使用 JSON 数据进行 PUT 请求的示例。它类似于 POST 请求：

method: "put"
"Content-Type": "application/json"
JSON.stringify()在对象上使用



const postData = {
  title: title,
  description: description,
};

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "put",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(postData)
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

获取删除示例



try {
  const response = await fetch('/bezkoder.com/data/42', {
    method: "delete"
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

使用 REST API 的 Javascript 获取示例

我们将构建一个HTTP客户端，用于向REST API发出CRUD请求，具体如下：

获取 GET 请求：获取所有教程、按 ID 获取教程、按标题查找教程
获取 POST 请求：创建新教程
获取 PUT 请求：更新现有教程
获取 DELETE 请求：删除单个教程，删除所有教程

此 Fetch 客户端与以下 Web API 配合使用：

方法	网址	行动
邮政	/api/tutorials	创建新教程
得到	/api/tutorials	检索所有教程
得到	/api/tutorials/:id	获取教程`:id`
放	/api/tutorials/:id	更新教程`:id`
删除	/api/tutorials/:id	删除教程`:id`
删除	/api/tutorials	删除所有教程
得到	/api/tutorials?title=[关键词]	查找标题包含以下内容的所有教程`keyword`

您可以在以下文章中找到搭建类似服务器的详细步骤：

更多详情请访问：
https://www.bezkoder.com/javascript-fetch/

结论

通过这篇 JavaScript Fetch 教程，您已经了解了使用 Fetch API 发送 GET/POST/PUT/DELETE 请求的多种方法（包括请求头、参数、请求体、表单数据等）。您还了解了如何处理 Fetch 请求中的错误，以及如何使用 async/await 和 try/catch 语句。

除了 Fetch API，您还可以使用 Axios，这是一个基于 Promise 的 HTTP 客户端 JavaScript 库，适用于 Node.js 和浏览器。请访问：
Axios 教程：Get/Post/Put/Delete 请求示例

学习愉快！下次见。

延伸阅读

在 React 中使用 Fetch：
React Fetch 与 REST API 的示例

使用 Vue：
Vue Fetch 与 REST API 的示例

您可以将其应用于以下 React/Vue 应用程序之一（使用 fetch 而不是 axios）：

文章来源：https://dev.to/tienbku/javascript-fetch-getpostputdelete-example-3dmp

菜单

分享

Javascript 获取示例：GET/POST/PUT/Delete

Javascript 获取示例：GET/POST/PUT/Delete

Javascript 获取概述

Javascript 获取响应数据

Javascript 获取响应元数据

获取错误处理

获取 try catch async-await

使用参数获取数据

使用请求头获取数据。

Javascript 获取 POST

获取 POST 表单数据

获取 POST JSON

获取 POST 文件

Javascript 获取 PUT

获取删除示例

使用 REST API 的 Javascript 获取示例

结论

延伸阅读

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码