前端如何获取本地JSON数据库数据？

在前端开发中，获取JSON数据库是常见的需求，通常涉及从服务器端获取数据并在前端进行解析和展示，JSON（JavaScript Object Notation）因其轻量级、易读性和与JavaScript的天然兼容性，成为前后端数据交互的主流格式，本文将系统介绍前端获取JSON数据的多种方式、技术细节及最佳实践,帮助开发者高效实现数据交互。

通过HTTP请求获取JSON数据

前端获取JSON数据最核心的方式是通过HTTP请求与服务器通信，现代浏览器提供了多种API支持异步请求，其中最常用的是Fetch API和XMLHttpRequest（XHR）。

使用Fetch API

Fetch API是现代浏览器推荐的标准接口，基于Promise设计，语法简洁且功能强大,基本使用步骤如下：

• 发起请求：通过fetch()方法指定URL，默认发起GET请求。

  fetch('https://api.example.com/data')
    .then(response => response.json()) // 解析JSON数据
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

• 处理响应：fetch()返回的Promise解析为Response对象，需调用json()方法将响应体解析为JSON对象，注意，即使HTTP状态码为404或500，fetch()也不会直接抛出错误，需通过response.ok或response.status判断请求是否成功。
• 配置选项：可通过第二个参数配置请求方法、 headers、 body等。

  fetch('https://api.example.com/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
  });

使用XMLHttpRequest

XHR是较早期的异步请求技术，兼容性更好，但语法相对繁琐,基本流程如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

处理跨域请求

由于浏览器的同源策略，前端页面无法直接向不同源的服务器发起请求,解决跨域问题的主要方案包括：

CORS（跨域资源共享）

服务器通过设置HTTP响应头允许跨域请求,服务器返回以下头信息：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

前端无需额外配置，直接发起请求即可，开发中可通过代理服务器（如Nginx、CORS Anywhere）或后端接口配合实现。

JSONP（仅适用于GET请求）

JSONP通过动态创建<script>标签绕过跨域限制,但要求服务器支持JSONP回调。

function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

本地存储与模拟数据

在开发或离线场景中,可通过本地存储或静态文件模拟JSON数据：

使用本地JSON文件

将JSON文件置于项目public或static目录下,通过相对路径直接访问：

fetch('/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

浏览器本地存储

通过localStorage或sessionStorage存储JSON数据,适合缓存或离线使用：

// 存储
localStorage.setItem('userData', JSON.stringify({ name: 'John' }));
// 读取
const userData = JSON.parse(localStorage.getItem('userData'));

前端框架与数据获取

现代前端框架（如React、Vue）提供了封装好的数据获取机制,简化开发流程：

React中的数据获取

• 生命周期方法：在componentDidMount中调用fetch：

  class MyComponent extends React.Component {
    componentDidMount() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }
    render() {
      return <div>{this.state.data?.name}</div>;
    }
  }

• Hooks：使用useEffect和useState：

  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(setData);
  }, []);

Vue中的数据获取

• Options API：在created或mounted钩子中请求：

  export default {
    data() {
      return { items: [] };
    },
    created() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => this.items = data);
    }
  };

• Composition API：使用ref和onMounted：

  import { ref, onMounted } from 'vue';
  export default {
    setup() {
      const items = ref([]);
      onMounted(() => {
        fetch('https://api.example.com/data')
          .then(response => response.json())
          .then(data => items.value = data);
      });
      return { items };
    }
  };

错误处理与性能优化

• 错误处理：始终捕获请求异常，处理网络错误或解析失败：

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    })
    .catch(error => console.error('Fetch error:', error));

• 性能优化：使用debounce或throttle控制请求频率，通过Cache-Control头或Service Worker缓存数据,减少重复请求。

FAQs

Q1：为什么fetch请求在HTTP状态码为404时不会进入catch块？
A：Fetch API仅在网络请求失败（如无网络连接）时才会触发catch，对于HTTP错误状态码（如404、500），需通过response.ok或response.status手动判断，

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  });

Q2：如何解决CORS预检请求（OPTIONS）导致的跨域问题？
A：CORS预检请求针对复杂请求（如非GET/POST方法、自定义headers），解决方案包括：

1. 后端正确配置Access-Control-Allow-Methods和Access-Control-Allow-Headers；
2. 后端对OPTIONS请求直接返回204状态码，不处理实际业务逻辑；
3. 前端避免发送不必要的复杂请求，或使用代理服务器（如Vue CLI的proxy配置）绕过跨域。