发请求终于不用jquery了

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，极大地简化了前端与后端之间的数据交互过程。