JavaScript中Fetch怎么发送一个最基础的Get请求并拉取Json数据-js教程-PHP中文网

fetch 获取 json 数据需三步：调用 fetch、用 response.json() 解析、处理数据或错误；必须检查 response.ok 以捕获 http 错误；推荐 async/await 写法并注意 cors 限制。

javascript中fetch怎么发送一个最基础的get请求并拉取json数据

直接用 fetch() 发送 GET 请求获取 JSON 数据，核心就三步：调用 fetch、用 response.json() 解析、处理数据或错误。

基础写法：一行发起，链式处理

最简形式如下，适用于大多数公开 API：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

必须检查响应状态，避免静默失败

fetch 只在网络异常时 reject，HTTP 错误状态（如 404、500）仍会进入 then。所以要手动判断 response.ok：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

response.ok 为 true 表示状态码在 200–299 范围内
否则应主动 throw 错误，让后续 catch 捕获

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('出错了:', error.message));

用 async/await 写更清晰

现代写法推荐使用 async/await，逻辑更直白，错误处理也更自然：

async function getPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('加载失败:', error);
  }
}
getPost();