如何利用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="/ai/901">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679989458289.png" alt="知我AI·PC客户端">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/901">知我AI·PC客户端</a>
                            <p>离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="知我AI·PC客户端">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/ai/901" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="知我AI·PC客户端">
                        </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'
    }
  }
}