js的fetch函数怎么用？

在JavaScript中，fetch 是一个用于发起网络请求（通常是HTTP或HTTPS请求）的现代API。这个API提供了一个简单、直观的方式来获取（或发送）网络资源。
 

基本用法

fetch 函数接收一个URL作为参数，并返回一个 Promise 对象，这个 Promise 在请求完成（无论是成功还是失败）时解析。
 

代码示例

fetch('https://baidu.com/')  
  .then(response => {  
    // 请求成功时，response是一个Response对象  
    // 你可以在这里检查HTTP状态码，解析响应体等  
    console.log(response.status);// 输出HTTP状态码，如200 404
    if (!response.ok) {  
      throw new Error('Network response was not ok');  
    }  
    return response.json(); // 或者response.text(), response.blob()等  
  })  
  .then(data => {  
    // 如果解析成功，data是解析后的数据（例如JSON对象）  
    console.log(data);  
  })  
  .catch(error => {  
    // 请求失败时，会在这里捕获错误  
    console.error('Fetch Error:', error);  
  });

fetch 的特点

基于Promise：fetch 返回的是一个 Promise 对象，这使得异步操作更加简洁和易于管理。
返回Response对象：fetch 的 then 方法接收到的第一个参数是一个 Response 对象，它包含了请求的各种信息，如状态码、状态消息、响应头等。
不自动解析响应体：与 XMLHttpRequest 不同，fetch 不会自动解析响应体。你需要调用 Response 对象上的方法（如 json(), text(), blob() 等）来解析响应体。
默认不带凭据：默认情况下，fetch 不会发送跨站请求的凭据（如cookies、HTTP认证及客户端SSL证明等）。如果你需要发送凭据，可以在 fetch 的第二个参数（一个配置对象）中设置 credentials: 'include'。
不会阻止页面加载：与 XMLHttpRequest 不同，fetch 在浏览器中的行为不会阻止页面的加载或解析。这是因为它基于 Promise，而 Promise 的特性之一就是它们不会阻塞代码的执行。
不支持超时和取消：原生的 fetch API 不支持设置请求超时或取消请求。但是，你可以通过一些技术手段（如使用 AbortController API）来实现这些功能。
 

附注

由于 fetch 是基于Promise的，所以你需要确保你的代码环境支持Promise。当然，主流浏览器已经普遍支持Promise。
在处理响应时，一定要检查 response.ok（它相当于检查 response.status 是否在200-299之间）。因为即使请求成功发出并收到响应，响应的状态码也可能表示错误（如404、500等）。
在解析响应体时，如果响应的内容类型与你使用的解析方法不匹配（例如，你尝试用 json() 解析一个文本文件），那么解析会失败并抛出一个错误。