JavaScript Fetch API Get/Post/Put/Delete示例

迈不过友情╰ 2023-10-01 16:20 11阅读 0赞

[Javascript Fetch example: Get/Post/Put/Delete - BezKoderJavascript Fetch API tutorial Get/ Post/ Put/ Delete example with params, json, body, headers, fetch error handling, fetch asyncawait example![favicon-60x60.png][]https://www.bezkoder.com/javascript-fetch/][Javascript Fetch example_ Get_Post_Put_Delete - BezKoderJavascript Fetch API tutorial Get_ Post_ Put_ Delete example with params_ json_ body_ headers_ fetch error handling_ fetch asyncawait example_favicon-60x60.png_https_www.bezkoder.com_javascript-fetch]

JavaScript Fetch API 提供了一个用于访问和操作 HTTP 请求和响应的接口。在本教程中，我们将创建使用 Javascript`fetch()`方法发出 Get/Post/Put/Delete 请求的示例。最后一部分展示了一个简单的 Fetch 示例——HTTP 客户端在 Javascript 中从 Rest API 进行交互和获取数据。

### **Javascript 获取概述** ###

Javascript Fetch API 有一个全局`fetch()`方法，提供通过网络异步获取资源的方法。  
`fetch()`返回一个使用`Response`对象解析的 Promise，一旦响应可用，该对象就会实现。

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

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

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

### **Javascript 获取响应数据** ###

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

*  [response.arrayBuffer()][response.arrayBuffer]：返回一个用`ArrayBuffer`.
 *  [response.blob()][response.blob]：返回一个用`Blob`.
 *  [response.error()][response.error]：返回与网络错误关联的新响应对象。
 *  [response.formData()][response.formData]：返回一个用 a 解析的 Promise `FormData`。
 *  [response.json()][response.json]：返回一个 Promise，解析结果为 JSON。
 *  [response.text()][response.text]：返回一个用文本解析的 Promise。

### **Javascript 获取响应元数据** ###

我们还可以从对象访问元数据，例如`headers`, `status`, `statusText`, :`type``url``Response`

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`, `500`）。它仅在遇到网络错误时拒绝。所以我们必须使用状态和/或属性`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);
      });

### **Fetch try catch async-await** ###

如果您想使用 async-await，只需使用 try/catch 块包装 fetch 调用。

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`object with`URLSearchParams`来设置查询字符串参数。

这是等价的：

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

### **使用标题获取** ###

要发送带有 Headers 的 Fetch 请求，我们传递一个带有`method`和`headers`属性的选项对象。

### **Javascript 获取 POST** ###

#### **获取 POST 表单数据** ####

让我们在请求中创建一个带有[Formdata][]的POST`body`请求。

如果你使用`application/x-www-form-urlencoded`，键和值被编码在键值元组中。

#### **获取 POST JSON** ####

让我们使用 JSON 创建一个 POST 请求。

我们`JSON.stringify()`在对象上使用它，然后再将它传递`body`给请求并`application/json`为 header设置`Content-Type`。

#### **获取 POST 文件** ####

通过使用表单数据处理文件与以前的类似。

我们不需要`Content-Type`用`multipart/form-data`. 浏览器将自动选择适当的内容类型标题，包括表单边界。

### **Javascript 获取 PUT** ###

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

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

### **获取 DELETE 示例** ###

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 Fetch 示例** ###

我们将构建一个 HTTP 客户端来向 Rest API 发出 CRUD 请求：

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

![60f0f907db98e3c1c683ecc30241cca3.png][]

此 Fetch Client 使用以下 Web API：

<table style="width:650px;"> 
 <thead> 
  <tr> 
   <th style="text-align:left;vertical-align:bottom;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">方法</span></span></th> 
   <th style="text-align:left;vertical-align:bottom;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">网址</span></span></th> 
   <th style="text-align:left;vertical-align:bottom;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">行动</span></span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">邮政</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/教程</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">创建新教程</span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">得到</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/教程</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">检索所有教程</span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">得到</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/tutorials/:id</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">检索教程&nbsp;<code>:id</code></span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">放</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/tutorials/:id</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">更新教程&nbsp;<code>:id</code></span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">删除</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/tutorials/:id</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">删除教程&nbsp;<code>:id</code></span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">删除</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/教程</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">删除所有教程</span></span></td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">得到</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">/api/tutorials?title=[关键字]</span></span></td> 
   <td style="vertical-align:top;"><span style="color:#6b6b6b;"><span style="background-color:#ffffff;">查找标题包含的所有教程&nbsp;<code>keyword</code></span></span></td> 
  </tr> 
 </tbody> 
</table>

您可以在其中一篇文章中逐步找到构建这样的服务器：

*  [Express、Sequelize 和 MySQL][Express_Sequelize _ MySQL]
 *  [Express、Sequelize 和 PostgreSQL][Express_Sequelize _ PostgreSQL]
 *  [Express、Sequelize 和 SQL Server][Express_Sequelize _ SQL Server]
 *  [Express 和 MongoDb][Express _ MongoDb]
 *  [Spring Boot 和 MySQL][Spring Boot _ MySQL]
 *  [Spring Boot 和 PostgreSQL][Spring Boot _ PostgreSQL]
 *  [Spring Boot 和 MongoDB][Spring Boot _ MongoDB]
 *  [Spring Boot 和 SQL Server][Spring Boot _ SQL Server]
 *  [弹簧靴和 H2][H2]
 *  [Spring Boot 和 Cassandra][Spring Boot _ Cassandra]
 *  [春季引导和甲骨文][Link 1]
 *  [Django 和 MySQL][Django _ MySQL]
 *  [Django 和 PostgreSQL][Django _ PostgreSQL]
 *  [Django 和 MongoDB][Django _ MongoDB]

请记住，您需要配置 CORS: `Access-Control-Allow-Origin: *`。**它有助于任何**来源  
都可以访问 REST API 。

– 使用 Fetch POST 请求创建教程：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

– 使用 Fetch GET 请求检索所有教程：

![9798a28a4abf4f3444da7dd77dc6101e.png][]

– 使用 Fetch GET 请求按 Id 检索教程：

![446f60e90a293de66bfaaabb33cb708b.png][]

– 使用 Fetch with params 按标题查找教程：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

– 使用 Fetch PUT 请求更新教程：

![1526b8148ea5061d1a4bd088e9164e7f.png][]

– 使用 Fetch DELETE 请求删除教程：

![dc23fd1046c1b2e7c1a56b597abe5cc4.png][]

### **源代码** ###

*index.html*

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>Fetch Requests example</title>
            <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
                />
        </head>
        <body>
            <div class="container my-3" style="max-width: 600px">
                <h3>Fetch Requests example</h3>
    
                <div class="card mt-3">
                    <div class="card-header">Fetch GET Request - BezKoder.com</div>
                    <div class="card-body">
                        <div class="input-group input-group-sm">
                            <button class="btn btn-sm btn-primary" onclick="getAllData()">Get All</button>
    
                            <input type="text" id="get-id" class="form-control ml-2" placeholder="Id">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-primary" onclick="getDataById()">Get by Id</button>
                            </div>
    
                            <input type="text" id="get-title" class="form-control ml-2" placeholder="Title">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-primary" onclick="getDataByTitle()">Find By Title</button>
                            </div>
    
                            <button class="btn btn-sm btn-warning ml-2" onclick="clearGetOutput()">Clear</button>
                        </div>   
    
                        <div id="getResult"></div>
                    </div>
                </div>
    
                <div class="card mt-3">
                    <div class="card-header">Fetch POST Request - BezKoder.com</div>
                    <div class="card-body">
                        <div class="form-group">
                            <input type="text" class="form-control" id="post-title" placeholder="Title">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="post-description" placeholder="Description">
                        </div>
                        <button class="btn btn-sm btn-primary" onclick="postData()">Post Data</button>
                        <button class="btn btn-sm btn-warning" onclick="clearPostOutput()">Clear</button>
    
                        <div id="postResult"></div>
                    </div>
                </div>
    
                <div class="card mt-3">
                    <div class="card-header">Fetch PUT Request - BezKoder.com</div>
                    <div class="card-body">
                        <div class="form-group">
                            <input type="text" class="form-control" id="put-id" placeholder="Id">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="put-title" placeholder="Title">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="put-description" placeholder="Description">
                        </div>
                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input" id="put-published">
                            <label class="form-check-label" for="put-published">Publish</label>
                        </div>
                        <button class="btn btn-sm btn-primary" onclick="putData()">Update Data</button>
                        <button class="btn btn-sm btn-warning" onclick="clearPutOutput()">Clear</button>
    
                        <div id="putResult"></div>
                    </div>
                </div>
    
                <div class="card mt-3">
                    <div class="card-header">Fetch DELETE Request - BezKoder.com</div>
                    <div class="card-body">
                        <div class="input-group input-group-sm">
                            <button class="btn btn-sm btn-danger" onclick="deleteAllData()">Delete All</button>
    
                            <input type="text" id="delete-id" class="form-control ml-2" placeholder="Id">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-danger" onclick="deleteDataById()">Delete by Id</button>
                            </div>
    
                            <button class="btn btn-sm btn-warning ml-2" onclick="clearDeleteOutput()">Clear</button>
                        </div>    
    
                        <div id="deleteResult"></div>      
                    </div>
                </div>
    
                <p class="mt-3">
                    ©
                    <a href="https://www.bezkoder.com/fetch-request" target="_blank">bezkoder.com</a>
                </p>
            </div>
    
            <script src="main.js"></script>
        </body>
    </html>

*main.js*

### **结论** ###

通过本 Javascript Fetch 教程，您已经了解了许多使用 Fetch API（带有标头、参数、正文、表单数据……）发出 GET/POST/PUT/DELETE 请求的方法。您还知道如何处理 Fetch 请求中的错误或使用 async/await 和 try/catch 语句。

除了 Fetch API，您还可以使用 Axios，它是一个基于 Promise 的 HTTP 客户端 Javascript。请访问：  
[Axios 教程：获取/发布/放置/删除请求示例][Axios]

快乐学习！再见。

[favicon-60x60.png]: https://www.bezkoder.com/wp-content/uploads/2019/10/favicon-60x60.png
[Javascript Fetch example_ Get_Post_Put_Delete - BezKoderJavascript Fetch API tutorial Get_ Post_ Put_ Delete example with params_ json_ body_ headers_ fetch error handling_ fetch asyncawait example_favicon-60x60.png_https_www.bezkoder.com_javascript-fetch]: https://www.bezkoder.com/javascript-fetch/
[response.arrayBuffer]: https://developer.mozilla.org/en-US/docs/Web/API/Response/arrayBuffer
[response.blob]: https://developer.mozilla.org/en-US/docs/Web/API/Response/blob
[response.error]: https://developer.mozilla.org/en-US/docs/Web/API/Response/error
[response.formData]: https://developer.mozilla.org/en-US/docs/Web/API/Response/formData
[response.json]: https://developer.mozilla.org/en-US/docs/Web/API/Response/json
[response.text]: https://developer.mozilla.org/en-US/docs/Web/API/Response/text
[Formdata]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
[60f0f907db98e3c1c683ecc30241cca3.png]: https://img-blog.csdnimg.cn/img_convert/60f0f907db98e3c1c683ecc30241cca3.png
[Express_Sequelize _ MySQL]: https://bezkoder.com/node-js-express-sequelize-mysql/
[Express_Sequelize _ PostgreSQL]: https://bezkoder.com/node-express-sequelize-postgresql/
[Express_Sequelize _ SQL Server]: https://www.bezkoder.com/node-js-sql-server-crud/
[Express _ MongoDb]: https://bezkoder.com/node-express-mongodb-crud-rest-api/
[Spring Boot _ MySQL]: https://bezkoder.com/spring-boot-jpa-crud-rest-api
[Spring Boot _ PostgreSQL]: https://bezkoder.com/spring-boot-postgresql-example/
[Spring Boot _ MongoDB]: https://bezkoder.com/spring-boot-mongodb-crud/
[Spring Boot _ SQL Server]: https://www.bezkoder.com/spring-boot-sql-server/
[H2]: https://bezkoder.com/spring-boot-jpa-h2-example/
[Spring Boot _ Cassandra]: https://bezkoder.com/spring-boot-cassandra-crud/
[Link 1]: https://bezkoder.com/spring-boot-hibernate-oracle/
[Django _ MySQL]: https://bezkoder.com/django-crud-mysql-rest-framework/
[Django _ PostgreSQL]: https://bezkoder.com/django-postgresql-crud-rest-framework/
[Django _ MongoDB]: https://bezkoder.com/django-mongodb-crud-rest-framework/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/18a6856af0074de682db0f79cf4a251d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[9798a28a4abf4f3444da7dd77dc6101e.png]: https://img-blog.csdnimg.cn/img_convert/9798a28a4abf4f3444da7dd77dc6101e.png
[446f60e90a293de66bfaaabb33cb708b.png]: https://img-blog.csdnimg.cn/img_convert/446f60e90a293de66bfaaabb33cb708b.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1a8c49f5e34645fd9c808ab74f7da1c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[1526b8148ea5061d1a4bd088e9164e7f.png]: https://img-blog.csdnimg.cn/img_convert/1526b8148ea5061d1a4bd088e9164e7f.png
[dc23fd1046c1b2e7c1a56b597abe5cc4.png]: https://img-blog.csdnimg.cn/img_convert/dc23fd1046c1b2e7c1a56b597abe5cc4.png
[Axios]: https://www.bezkoder.com/axios-request/