javascript如何请求API_fetch方法的基本用法是什么【教程】

fetch最简写法为fetch(url).then(res=>res.json()).then(data=>console.log(data)).catch(err=>console.error(err))；必须显式调用.json()等方法读取响应体，且需用response.ok判断http状态码是否成功。

fetch 请求最简写法长什么样

直接用 fetch 发 GET 请求，不需要额外配置就能跑通，但必须手动处理响应体。很多人卡在“请求发出去了，但拿不到数据”，其实是忘了调用 response.json() 或 response.text()。

最简可用示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

• fetch 默认只返回 Response 对象，不是 JSON 数据
• 必须显式调用 .json()、.text() 或 .blob() 才能读取 body
• .json() 返回 Promise，不能直接写 response.json（漏了括号）

POST 请求要带 body 和 headers 吗

要。GET 请求靠 URL 传参，POST 必须把数据塞进 body，且多数 API 要求 Content-Type: application/json。不设 headers 很可能被后端拒绝或解析成空对象。

常见 POST 写法：

立即学习“Java免费学习笔记（深入）”；

家电小商城网站源码1.0

家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l

下载

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'abc', password: '123' })
})
.then(res => res.json())
.catch(err => console.error(err));

• body 必须是字符串或 FormData，对象要先 JSON.stringify
• headers 是对象，不是字符串；键名大小写不敏感，但值要按规范写
• 如果后端用 form-data，就不用设 Content-Type，让浏览器自动加 boundary

为什么 fetch 不报 404 或 500 错误

fetch 只在网络层失败（如断网、DNS 失败、CORS 拒绝）时才进 catch；HTTP 状态码 4xx/5xx 仍算“成功响应”，会进 then。这是最容易踩的坑——你看到 401 却没走错误处理逻辑。

• 检查 response.ok（等价于 response.status >= 200 && response.status ）
• 或手动判断 response.status === 401 等特定状态码
• 别依赖 catch 捕获业务错误，它只管网络异常

推荐写法：

fetch('/api/user')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

如何取消一个正在执行的 fetch 请求

原生 fetch 不支持直接取消，但可以用 AbortController 实现超时或手动中止。没有它，用户切换页面或重复点击时，旧请求还在后台跑，可能造成状态错乱。

• 创建 const controller = new AbortController()
• 把 signal: controller.signal 传进 fetch 配置项
• 调用 controller.abort() 即可中止（触发 AbortError）
• 注意：AbortError 是正常错误，应和网络错误区分开（比如不弹“请求失败”提示）

示例：

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/slow', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已超时取消');
    } else {
      console.error('其他错误:', err);
    }
  });