深入解析fetch API：定义、参数、返回值及应用实例

最新推荐文章于 2024-10-05 20:37:12 发布

软考鸭

最新推荐文章于 2024-10-05 20:37:12 发布

阅读量1.4k

点赞数 9

分类专栏： javascript帮助文档 nodejs帮助文档文章标签： javascript fetch 红衣大叔

本文链接：https://blog.csdn.net/gusushantang/article/details/141533162

版权

nodejs帮助文档同时被 2 个专栏收录

164 篇文章 1 订阅

订阅专栏

javascript帮助文档

72 篇文章 1 订阅

订阅专栏

在Web开发中，fetch API已成为处理HTTP请求的一种现代且强大的方式。作为XMLHttpRequest的升级版，fetch不仅简化了代码，还提供了更丰富的功能和更灵活的使用方式。本文将全面讲解fetch函数的定义、参数及返回值，帮助开发者更好地理解和应用这一API。

一、fetch函数定义

fetch函数是Web API的一部分，用于在JavaScript脚本中发起HTTP请求。其基本语法如下：

fetch(input[, init])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

input：定义要获取的资源。它可以是一个USVString（包含要获取资源的URL）或一个Request对象。
init（可选）：一个配置项对象，包含所有对请求的设置，如请求方法、头信息、请求体等。

fetch函数返回一个Promise对象，该对象在请求成功时解析（resolve）为一个Response对象，在请求失败时拒绝（reject）一个错误。

二、fetch参数详解

1. input参数

input参数可以是字符串形式的URL或Request对象。当使用URL字符串时，fetch默认发起GET请求。使用Request对象时，可以更灵活地配置请求，包括请求方法、头信息、请求体等。

2. init参数

init参数是一个可选的配置项对象，支持以下属性：

method：请求使用的方法，如GET、POST、PUT、DELETE等。
headers：请求的头信息，形式为Headers对象或包含ByteString值的对象字面量。
body：请求的body信息，可能是一个Blob、BufferSource、FormData、URLSearchParams或USVString对象。注意，GET或HEAD方法的请求不能包含body信息。
mode：请求的模式，如cors、no-cors或same-origin。
credentials：请求的credentials，如omit、same-origin或include。
cache：请求的cache模式，如default、no-store、reload、no-cache、force-cache或only-if-cached。
redirect：重定向模式，如follow（自动重定向）、error（如果产生重定向将自动终止并抛出错误）或manual（手动处理重定向）。
referrer：一个USVString，可以是no-referrer、client或一个URL。
referrerPolicy：指定referer HTTP头部的值。
integrity：请求的subresource integrity值。

三、fetch返回值

fetch函数返回一个Promise对象，该对象在请求成功时解析为一个Response对象。Response对象包含了一系列属性和方法，用于处理响应数据。

Response对象的主要属性和方法

status（number）：HTTP请求结果的状态码，范围在100-599之间。
statusText（String）：服务器返回的状态报告。
ok（boolean）：如果状态码在200-299之间，表示请求成功，则为true。
headers（Headers）：返回头部信息，可通过Headers对象的方法访问。
url（String）：请求的URL。
text()：返回一个解析为文本字符串的Promise对象。
json()：返回一个解析为JSON对象的Promise对象。
blob()：返回一个解析为Blob对象的Promise对象。
arrayBuffer()：返回一个解析为ArrayBuffer对象的Promise对象。
formData()：返回一个解析为FormData对象的Promise对象。

四、使用示例

GET请求示例

获取HTML类型数据：

fetch('/users.html')
  .then(response => response.text())
  .then(body => {
    document.body.innerHTML = body;
  })
  .catch(error => console.error('Error:', error));

获取JSON类型数据：

fetch('/users.json')
  .then(response => response.json())
  .then(json => console.log('parsed json', json))
  .catch(error => console.error('Error:', error));

POST请求示例

fetch('/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'example',
    password: '123456',
  }),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

五、总结

fetch API提供了比XMLHttpRequest更简洁、更强大的HTTP请求处理能力。通过了解其定义、参数和返回值，开发者可以更加灵活地在Web应用中发起和处理HTTP请求。无论是GET请求还是POST请求，fetch都提供了一种简洁且高效的方式来获取和解析响应数据。希望本文能帮助你更好地理解和应用fetch API。