js如何请求json数据格式

JavaScript 轻松入门：如何高效请求与处理 JSON 数据**

在现代 Web 开发中，JavaScript 与 JSON（JavaScript Object Notation）数据的交互是不可或缺的一环，JSON 以其轻量级、易读易写的特性，成为了前后端数据交换的主流格式，JavaScript 究该如何请求并处理 JSON 格式的数据呢？本文将详细介绍几种常用的方法，从基础的 XMLHttpRequest 到现代的 Fetch API，并辅以实例说明。

理解 JSON

在开始之前,我们先简单回顾一下 JSON，JSON 是一种基于 JavaScript 对象字面量的数据格式，但它独立于语言，它由键值对组成，键名必须用双引号括起来，值可以是字符串、数字、布尔值、数组、对象（嵌套）或 null。

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "coding"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

使用 XMLHttpRequest (XHR)

XMLHttpRequest 是一种传统的在后台与服务器交换数据的技术，它无需刷新整个页面即可更新部分网页内容，虽然现在有了更现代的 API，但了解 XHR 仍然很有必要。

基本步骤：

创建 XMLHttpRequest 对象。
使用 open() 方法初始化请求，指定请求方法（GET、POST 等）和 URL。
设置 onreadystatechange 事件处理程序，监听请求状态变化。
使用 send() 方法发送请求。

示例代码（GET 请求 JSON）：

// 1. 创建 XHR 对象
const xhr = new XMLHttpRequest();
// 2. 初始化请求
xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步
// 3. 设置响应类型为 JSON（可选，但推荐）
xhr.responseType = 'json';
// 4. 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) { // 4 表示请求完成
    if (xhr.status === 200) { // 200 表示请求成功
      // 5. 获取并处理 JSON 数据
      const data = xhr.response;
      console.log('获取到的 JSON 数据:', data);
      // 在这里可以对数据进行进一步处理...
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  }
};
// 6. 发送请求
xhr.send();

注意事项：

readyState 表示请求的状态：0（未初始化）、1（已打开）、2（已发送）、3（接收中）、4（已完成）。
status 表示 HTTP 状态码，200 表示成功，404 表示未找到，500 表示服务器内部错误等。
设置 xhr.responseType = 'json' 后，xhr.response 会自动被解析为 JavaScript 对象，否则需要手动使用 JSON.parse(xhr.responseText)。

使用 Fetch API

Fetch API 是现代浏览器提供的一个更强大、更灵活、更符合 Promise 风格的网络请求 API，它旨在取代 XHR，成为 Web API 的一部分。

基本语法：

fetch(url, options) 返回一个 Promise，该 Promise 解析为 Response 对象。

示例代码（GET 请求 JSON）：

// 使用 fetch 发起 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应状态，ok 为 false，则抛出错误
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    // 使用 response.json() 解析 JSON 数据，这也会返回一个 Promise
    return response.json();
  })
  .then(data => {
    // data 已经是解析后的 JavaScript 对象
    console.log('获取到的 JSON 数据:', data);
    // 在这里可以对数据进行进一步处理...
  })
  .catch(error => {
    // 捕获请求或解析过程中发生的错误
    console.error('请求失败:', error);
  });

更简洁的 async/await 写法：

结合 async/await，可以让异步代码看起来更像同步代码，提高可读性。

async function fetchJsonData() {
  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('获取到的 JSON 数据:', data);
    // 在这里可以对数据进行进一步处理...
  } catch (error) {
    console.error('请求失败:', error);
  }
}
// 调用函数
fetchJsonData();

Fetch API 的优势：

基于 Promise，语法更简洁，易于使用 async/await。
提供了更丰富的 Response 对象方法和属性。
支持请求和响应的流式处理。

使用第三方库（如 Axios）

虽然 Fetch API 已经很强大，但在实际开发中，开发者常常会选择第三方 HTTP 客户端库，如 Axios，它提供了更丰富的功能，如请求拦截、响应拦截、自动转换 JSON、取消请求、超时处理等，并且在旧浏览器中的兼容性也更好（通过 Promise polyfill）。

示例代码（使用 Axios）：

首先需要安装 Axios（在 Node.js 中）或引入 CDN 链接（在浏览器中）。

<!-- 浏览器中通过 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// 使用 axios 发起 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    // Axios 会自动将响应数据解析为 JSON
    const data = response.data;
    console.log('获取到的 JSON 数据:', data);
    // 在这里可以对数据进行进一步处理...
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('请求失败，状态码:', error.response.status);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('没有收到响应:', error.request);
    } else {
      // 请求设置出错
      console.error('请求出错:', error.message);
    }
  });

更简洁的 async/await 写法：

async function fetchJsonDataWithAxios() {
  try {
    const response = await axios.get('https://api.example.com/data');
    const data = response.data;
    console.log('获取到的 JSON 数据:', data);
    // 在这里可以对数据进行进一步处理...
  } catch (error) {
    // Axios 的错误处理更细致
    if (error.response) {
      console.error('请求失败，状态码:', error.response.status);
    } else {
      console.error('请求失败:', error.message);
    }
  }
}
// 调用函数
fetchJsonDataWithAxios();

跨域请求 (CORS)

当前端页面（https://www.frontend.com）请求另一个域名（https://api.example.com）的资源时，会涉及到跨域资源共享（CORS）问题，如果后端服务器没有配置允许跨域请求，浏览器会阻止前端的请求。

解决 CORS 问题通常需要后端服务器进行配置，在响应头中添加 Access-Control-Allow-Origin 等字段，前端开发者无法直接通过 JavaScript 解决 CORS 问题（除非使用代理服务器）。

方法	优点	缺点
XMLHttpRequest (XHR)	兼容性好（支持 IE7+），功能全面	API 繁琐，基于回调，代码可读性较差
Fetch API	现代、简洁，基于 Promise，支持 async/await	默认不拦截错误（需要手动检查 `response.ok`），对旧浏览器兼容性需 polyfill
Axios 等第三方库	功能强大（拦截器、超时、取消请求等），自动转换 JSON，错误处理友好，兼容性好	需要额外引入库，增加项目体积