fetch 方法是现代Web开发中一个非常重要的功能，用于从服务器异步获取资源。它是JavaScript语言的一部分，广泛应用于浏览器环境和一些支持Fetch API的Node.js环境中。fetch 提供了一个更强大、灵活且 promise-based 的方式来处理网络请求，相比传统的 XMLHttpRequest（XHR）而言，它更加简洁易用，并且支持更多的现代网络特性。
基本语法
fetch(url, [options])
- url (
string): 要请求的资源的URL。 - options (
Object, 可选): 一个可选的对象，包含发起请求时的一系列选项，如HTTP方法、请求头、请求体等。
Options 参数
- method (
string, 默认'GET'): 请求的方法，如'GET','POST','PUT','DELETE'等。 - headers (
Object): 请求头对象，用于设置HTTP请求头。 - body (
string|Blob|FormData|URLSearchParams|ReadableStream, 可选): 请求主体，用于POST、PUT等方法发送数据。 - mode (
string, 默认'cors'): 请求的模式，如'cors','no-cors','same-origin'。 - credentials (
string, 默认'omit'): 用于控制请求是否带上cookie，可选值有'omit','same-origin','include'。 - cache (
string, 默认'default'): 缓存行为，如'default','no-store','reload','no-cache','force-cache','only-if-cached'。 - redirect (
string, 默认'follow'): 重定向行为，如'follow','error','manual'。 - referrerPolicy (
string, 默认'no-referrer-when-downgrade'): 控制Referrer的策略。
返回值
fetch() 方法返回一个 Promise，该Promise在请求完成时解析为 Response 对象，无论请求成功还是失败。这意味着你通常需要使用.then()和.catch()或async/await来处理响应和错误。
示例
GET 请求
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析JSON格式的响应体
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
POST 请求
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' }) // 发送JSON格式的数据
})
.then(response => response.text())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));
注意事项
fetch不会自动处理重定向或错误状态，即使HTTP状态码为404或500，也会解析为一个成功的Response对象，因此需要手动检查response.ok属性或状态码。- 使用
response.json(),response.text(),response.blob(),response.formData()等方法来处理不同类型的响应体。 - 对于跨域请求，服务器需要正确设置CORS（跨源资源共享）头，否则请求可能失败。
总之，fetch 方法以其现代化、灵活且基于Promise的API，极大地简化了前端与后端之间的数据交互过程。
