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

JavaScriptFetchAPI使用_JavaScript现代请求方式

夢幻星辰

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

原创

210人浏览过

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免费学习笔记（深入）”；

EasyCart开源网店系统

Easycart是一款专业的电子商务网站程序，为各大企业提供最适合的电子商务网络销售网站前后台方案。Easycart是Easycart开发团队通过对现代电子商务以及消费者购物方式进行深入研究，充分了解企业以及消费者的需求后研发的现代电子商务行业使用的程序。面向不同的企业品牌、代理商提出了不同的方案，用户可根据企业自身特点，调整后台设置，创建最适合自己的网店模版。易学、易用、易管理、易推广，高效

查看详情

注意设置 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中文网其它相关文章！