JavaScriptFetchAPI使用_JavaScript现代请求方式-js教程-PHP中文网

JavaScriptFetchAPI使用_JavaScript现代请求方式

夢幻星辰

发布： 2025-12-02 19:59:02

原创

182人浏览过

Fetch API 提供简洁、基于 Promise 的网络请求方式，支持 GET/POST 请求及 JSON 解析；需手动检查 response.ok 判断 HTTP 错误，结合 async/await 可提升代码可读性。

javascriptfetchapi使用_javascript现代请求方式

JavaScript 的 Fetch API 提供了一种现代化、简洁的方式来发起网络请求。相比传统的 XMLHttpRequest，它更易读、支持 Promise，并且原生集成了解析 JSON 等常用操作。下面介绍它的基本用法和常见场景。

基本语法与 GET 请求

Fetch 最简单的用法是发起一个 GET 请求，获取远程数据。

调用 fetch() 会返回一个 Promise，响应结果需要通过 .json() 方法进一步解析。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

登录后复制

发送 POST 请求

向服务器提交数据时，需配置请求选项，如方法、请求头和请求体。

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

工资查查移动工资条

大部分的工资还是以打印工资条的形式进行，偶有公司使用邮件发放工资条，而工资条的现代形式应该是移动工资条，以实现信息的备忘、到达、管理、对帐、环保、高效等需求……，用户已经习惯使用手机（或以其它移动方式）实现一切需求，应用的移动化是大势所趋。工资查查就在这样的背景下诞生，北京亦卓科技于2017的开发并推出了微信小程序工资查查。由于对有用户对数据隐私与安全性的考虑，北京亦卓科技在推出了云端应用--工资

查看详情

注意设置 Content-Type 为 application/json，并将数据用 JSON.stringify() 转换。

示例：

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '张三',
    age: 25
  })
})
.then(response => response.json())
.then(result => {
  console.log(result);
})
.catch(error => {
  console.error('错误:', error);
});

登录后复制

处理请求状态与错误

Fetch 只有在网络错误时才会触发 catch，HTTP 错误状态（如 404、500）不会自动 reject。必须手动检查 response.ok 或状态码。

response.ok：布尔值，表示状态码是否在 200-299 之间
response.status：返回具体的 HTTP 状态码
可结合这些判断来抛出错误，确保异常能被后续 catch 捕获

使用 async/await 简化写法

结合 async 和 await，可以让异步代码看起来更像同步，逻辑更清晰。

示例：

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求出错:', error);
  }
}
getData();

登录后复制

基本上就这些。Fetch API 简洁强大，适合大多数前端请求场景，配合 async/await 使用体验更佳。不复杂但容易忽略的是对响应状态的手动判断。

以上就是JavaScriptFetchAPI使用_JavaScript现代请求方式的详细内容，更多请关注php中文网其它相关文章！