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

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 examplehttps://www.bezkoder.com/javascript-fetch/

JavaScript Fetch API 提供了一个用于访问和操作 HTTP 请求和响应的接口。在本教程中，我们将创建使用 Javascriptfetch()方法发出 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()：返回一个用ArrayBuffer.
• response.blob()：返回一个用Blob.
• response.error()：返回与网络错误关联的新响应对象。
• response.formData()：返回一个用 a 解析的 Promise FormData。
• response.json()：返回一个 Promise，解析结果为 JSON。
• response.text()：返回一个用文本解析的 Promise。

Javascript 获取响应元数据

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

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.okresponse.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);
  }
}

使用参数获取

您可以使用URLobject withURLSearchParams来设置查询字符串参数。

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');

使用标题获取

要发送带有 Headers 的 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 表单数据

让我们在请求中创建一个带有Formdata的POSTbody请求。

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为 header设置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 数据生成 Fetch PUT 示例。它类似于 Fetch 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);
}

获取 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 请求：删除一个教程，删除所有教程

此 Fetch Client 使用以下 Web API：

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

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

• Express、Sequelize 和 MySQL
• Express、Sequelize 和 PostgreSQL
• Express、Sequelize 和 SQL Server
• Express 和 MongoDb
• Spring Boot 和 MySQL
• Spring Boot 和 PostgreSQL
• Spring Boot 和 MongoDB
• Spring Boot 和 SQL Server
• 弹簧靴和 H2
• Spring Boot 和 Cassandra
• 春季引导和甲骨文
• Django 和 MySQL
• Django 和 PostgreSQL
• Django 和 MongoDB

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

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

 

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

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

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

 

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

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

源代码

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

const baseURL = "http://localhost:8080/api";

function htmlizeResponse(res) {
    return (
            `<div class="alert alert-secondary mt-2" role="alert"><pre>` +
            JSON.stringify(res, null, 2) +
            "</pre></div>"
            );
}

async function getAllData() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";

    try {
        const res = await fetch(`${baseURL}/tutorials`);

        if (!res.ok) {
            const message = `An error has occured: ${res.status} - ${res.statusText}`;
            throw new Error(message);
        }

        const data = await res.json();

        const result = {
            status: res.status + "-" + res.statusText,
            headers: {
                "Content-Type": res.headers.get("Content-Type"),
                "Content-Length": res.headers.get("Content-Length"),
            },
            length: res.headers.get("Content-Length"),
            data: data,
        };

        resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err.message);
    }
}

async function getDataById() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";

    const id = document.getElementById("get-id").value;

    if (id) {
        try {
            const res = await fetch(`${baseURL}/tutorials/${id}`);

            if (!res.ok) {
                const message = `An error has occured: ${res.status} - ${res.statusText}`;
                throw new Error(message);
            }

            const data = await res.json();

            const result = {
                data: data,
                status: res.status,
                statusText: res.statusText,
                headers: {
                    "Content-Type": res.headers.get("Content-Type"),
                    "Content-Length": res.headers.get("Content-Length"),
                },
            };

            resultElement.innerHTML = htmlizeResponse(result);
        } catch (err) {
            resultElement.innerHTML = htmlizeResponse(err.message);
        }
    }
}

async function getDataByTitle() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";

    const title = document.getElementById("get-title").value;

    if (title) {
        try {
            // const res = await fetch(`${baseURL}/tutorials?title=${title}`);

            let url = new URL(`${baseURL}/tutorials`);
            const params = {title: title};
            url.search = new URLSearchParams(params);

            const res = await fetch(url);

            if (!res.ok) {
                const message = `An error has occured: ${res.status} - ${res.statusText}`;
                throw new Error(message);
            }

            const data = await res.json();

            const result = {
                status: res.status + "-" + res.statusText,
                headers: {
                    "Content-Type": res.headers.get("Content-Type"),
                    "Content-Length": res.headers.get("Content-Length"),
                },
                data: data,
            };

            resultElement.innerHTML = htmlizeResponse(result);
        } catch (err) {
            resultElement.innerHTML = htmlizeResponse(err.message);
        }
    }
}

async function postData() {
    let resultElement = document.getElementById("postResult");
    resultElement.innerHTML = "";

    const title = document.getElementById("post-title").value;
    const description = document.getElementById("post-description").value;

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

    try {
        const res = await fetch(`${baseURL}/tutorials`, {
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "x-access-token": "token-value",
            },
            body: JSON.stringify(postData),
        });

        if (!res.ok) {
            const message = `An error has occured: ${res.status} - ${res.statusText}`;
            throw new Error(message);
        }

        const data = await res.json();

        const result = {
            status: res.status + "-" + res.statusText,
            headers: {
                "Content-Type": res.headers.get("Content-Type"),
                "Content-Length": res.headers.get("Content-Length"),
            },
            data: data,
        };

        resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err.message);
    }
}

async function putData() {
    let resultElement = document.getElementById("putResult");
    resultElement.innerHTML = "";

    const id = document.getElementById("put-id").value;
    const title = document.getElementById("put-title").value;
    const description = document.getElementById("put-description").value;
    const published = document.getElementById("put-published").checked;

    const putData = {
        title: title,
        description: description,
        published: published,
    };

    try {
        const res = await fetch(`${baseURL}/tutorials/${id}`, {
            method: "put",
            headers: {
                "Content-Type": "application/json",
                "x-access-token": "token-value",
            },
            body: JSON.stringify(putData),
        });

        if (!res.ok) {
            const message = `An error has occured: ${res.status} - ${res.statusText}`;
            throw new Error(message);
        }

        const data = await res.json();

        const result = {
            status: res.status + "-" + res.statusText,
            headers: {"Content-Type": res.headers.get("Content-Type")},
            data: data,
        };

        resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err.message);
    }
}

async function deleteAllData() {
    let resultElement = document.getElementById("deleteResult");
    resultElement.innerHTML = "";

    try {
        const res = await fetch(`${baseURL}/tutorials`, {method: "delete"});

        const data = await res.json();

        const result = {
            status: res.status + "-" + res.statusText,
            headers: {"Content-Type": res.headers.get("Content-Type")},
            data: data,
        };

        resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err.message);
    }
}

async function deleteDataById() {
    let resultElement = document.getElementById("deleteResult");
    resultElement.innerHTML = "";

    const id = document.getElementById("delete-id").value;

    try {
        const res = await fetch(`${baseURL}/tutorials/${id}`, {method: "delete"});

        const data = await res.json();

        const result = {
            status: res.status + "-" + res.statusText,
            headers: {"Content-Type": res.headers.get("Content-Type")},
            data: data,
        };

        resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err.message);
    }
}

function clearGetOutput() {
    document.getElementById("getResult").innerHTML = "";
}

function clearPostOutput() {
    document.getElementById("postResult").innerHTML = "";
}

function clearPutOutput() {
    document.getElementById("putResult").innerHTML = "";
}

function clearDeleteOutput() {
    document.getElementById("deleteResult").innerHTML = "";
}

结论

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

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

快乐学习！再见。