Fetch API 与网络请求

// GET 请求
fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) {
      // 404/500 走到这里：主动抛错，让后续 catch 接住
      throw new Error('HTTP ' + response.status);
    }
    return response.json();
  })
  .then((data) => console.log('数据:', data))
  .catch((error) => console.error('错误:', error));

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('HTTP ' + response.status);
    }
    return await response.json();
  } catch (error) {
    console.error('错误:', error);
    throw error; // 让调用方感知失败
  }
}

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' }),
})
  .then((response) => response.json())
  .then((data) => console.log('创建成功:', data))
  .catch((error) => console.error('错误:', error));

<form id="comment-form">
  <input name="author" placeholder="昵称" required />
  <textarea name="content" placeholder="留言" required></textarea>
  <button type="submit">提交</button>
</form>
<script>
  const form = document.getElementById('comment-form');
  form.addEventListener('submit', async (event) => {
    event.preventDefault(); // 拦下浏览器默认的整页跳转提交

    const response = await fetch('/api/comments', {
      method: 'POST',
      body: new FormData(form), // 自动收集全部字段并设置 multipart 头
    });
    if (!response.ok) {
      alert('提交失败：HTTP ' + response.status);
      return;
    }
    form.reset();
  });
</script>

const options = {
  method: 'GET',                    // GET | POST | PUT | DELETE | PATCH
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
  },
  body: JSON.stringify(data),       // POST/PUT 请求体
  mode: 'cors',                     // cors | no-cors | same-origin
  credentials: 'include',           // include | same-origin | omit
  cache: 'default',                 // default | no-store | reload | no-cache | force-cache
  redirect: 'follow',               // follow | error | manual
  signal: controller.signal,        // 用于取消请求（见第 3 节）
};

const controller = new AbortController();

fetch('https://api.example.com/data', { signal: controller.signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('请求已取消'); // 取消不是错误，单独分支处理
    } else {
      console.error('错误:', error);
    }
  });

// 触发取消：新请求发出前取消旧的
controller.abort();

let currentController = null;

async function searchSuggest(keyword) {
  // 1. 取消上一个未完成的请求
  if (currentController) currentController.abort();
  currentController = new AbortController();

  try {
    const response = await fetch('/api/suggest?q=' + encodeURIComponent(keyword), {
      signal: currentController.signal,
    });
    if (!response.ok) throw new Error('HTTP ' + response.status);
    const list = await response.json();
    renderSuggest(list);
  } catch (error) {
    if (error.name !== 'AbortError') {
      // 真正的网络错误才提示；取消是正常流程
      showSuggestError(error.message);
    }
  }
}

input.addEventListener('input', (e) => searchSuggest(e.target.value.trim()));

<form id="upload-form">
  <input type="file" name="avatar" accept="image/*" />
  <button type="submit">上传头像</button>
</form>
<progress id="progress" value="0" max="100"></progress>
<script>
  // fetch 本身没有上传进度回调；XHR 的 upload.onprogress 是页面级上传进度的现实选择
  document.getElementById('upload-form').addEventListener('submit', (event) => {
    event.preventDefault();
    const form = event.target;
    const bar = document.getElementById('progress');

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/upload');
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) bar.value = Math.round((e.loaded / e.total) * 100);
    };
    xhr.onload = () => {
      bar.value = xhr.status >= 200 && xhr.status < 300 ? 100 : 0;
    };
    xhr.send(new FormData(form));
  });
</script>