前端调用API接口的实用技巧

在网页开发中，前端调用API接口是再常见不过的操作。比如你在刷一个商品列表页，页面一打开，数据就自动加载出来，背后其实就是前端代码在悄悄请求后端提供的API接口。

用 fetch 发起请求

现代浏览器原生支持 fetch，不用引入额外库就能发送网络请求。比如想从服务器获取用户信息：

fetch('/api/user/123')
  .then(response => response.json())
  .then(data => {
    console.log(data.name);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

这段代码会向 /api/user/123 发起 GET 请求，拿到响应后转成 JSON 格式，然后打印用户名。整个过程就像你点外卖后等着骑手送货上门，只不过这里“下单”是发请求，“收货”是处理返回的数据。

async/await 让代码更清晰

如果嵌套太多 then，代码容易变“面条式”。可以用 async 和 await 改写：

async function getUser() {
  try {
    const response = await fetch('/api/user/123');
    const data = await response.json();
    console.log(data.name);
  } catch (error) {
    console.error('请求出错：', error);
  }
}

看起来更像一步步执行的流程，读起来也顺。就像你做饭时按步骤来：先开火，再倒油，接着下菜——每一步都等上一步完成。

带参数的 POST 请求

有时候不只是读数据，还要提交内容。比如用户填写表单后点击“保存”，就需要用 POST 方法把数据传给服务器：

async function saveComment() {
  const commentData = { content: '这篇文章讲得挺清楚', userId: 88 };
  
  const response = await fetch('/api/comments', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(commentData)
  });
  
  if (response.ok) {
    console.log('评论已保存');
  }
}

这里设置了请求头说明发的是 JSON 数据，再把对象转成字符串放进请求体。就像寄快递前要打包好物品、贴上地址标签一样，服务器才能正确接收和解析。

处理跨域问题的小提醒

有时候代码明明写对了，但浏览器报错说“不允许跨域”。这是因为安全机制限制了不同域名之间的请求。如果你在本地开发访问的是另一个域名的接口，可以确认后端是否开启了 CORS（跨域资源共享），或者开发阶段使用代理转发请求。

比如在 Vite 或 Webpack 配置里加个代理：

server: {
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

这样所有以 /api 开头的请求都会被自动转到后端服务，绕过浏览器的跨域检查。

前端调用 API 并不复杂，关键是在合适的时机发起请求，正确处理返回结果，并应对可能出现的网络异常。多练几次，就跟煮泡面一样熟练了。