如何利用JavaScript与后端API进行高效数据交互？

<pre class="brush:php;toolbar:false;">
fetch('/api/users')
  .then(response => {
    if (!response.ok) throw new Error('网络错误');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

<pre class="brush:php;toolbar:false;">
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '张三', email: 'zhang@example.com' })
})
.then(res => res.json())
.then(data => console.log('创建成功:', data));
</font>

<H3>封装请求函数提升复用性</H3>
<p>将通用逻辑（如鉴权、错误处理）抽离成统一函数，避免重复代码。</p>
<p>例如创建一个通用的apiClient：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/8727">
                            <img src="https://img.php.cn/upload/webcode/000/000/012/175639320454340.png" alt="JTopCms建站系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8727">JTopCms建站系统</a>
                            <p>JTopCMS基于JavaEE自主研发，是用于管理站群内容的国产开源软件(CMS)，能高效便捷地进行内容采编，审核，模板制作，用户交互以及文件等资源的维护。安全，稳定，易扩展，支持国产中间件及数据库，适合建设政府，教育以及企事业单位的站群系统。  系统特色 1. 基于 JAVA 标准自主研发，支持主流国产信创环境，国产数据库以及国产中间件。安全，稳定，经过多次政务与企事业单位项目长期检验，顺利通过</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="JTopCms建站系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8727" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="JTopCms建站系统">
                        </a>
                    </div>
                
<font color="#666666">
<pre class="brush:php;toolbar:false;"><code>
async function apiClient(url, options = {}) {
  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    },
    ...options
  };

  try {
    const response = await fetch(url, config);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('API调用失败:', error);
    throw error;
  }
}

// 使用方式
apiClient('/api/profile').then(data => renderProfile(data));

<pre class="brush:php;toolbar:false;">
const loading = document.getElementById('loading');
async function loadUserData() {
  loading.style.display = 'block';
  try {
    const data = await apiClient('/api/user');
    displayUser(data);
  } finally {
    loading.style.display = 'none';
  }
}

<pre class="brush:php;toolbar:false;">
function debounce(func, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const search = debounce(async keyword => {
  const results = await apiClient(`/api/search?q=${keyword}`);
  showResults(results);
}, 300);

<pre class="brush:php;toolbar:false;">
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}