API接口怎么对接：手把手教你接入不踩坑

你有没有遇到过这种情况：公司要做个新功能，前端页面都画好了，就差从后台拿数据，结果卡在了API接口对接上？别急，这事儿其实没那么玄乎，搞清楚步骤，谁都能上手。

先搞明白API是啥

你可以把API想象成餐厅的菜单。你想吃红烧肉，不用进厨房自己炒，只要告诉服务员“来份红烧肉”，他就会把做好的菜端上来。API就是这个“点菜+上菜”的过程，你发个请求，它返回你要的数据。

拿到接口文档是第一步

对接前，先找后端同事要一份接口文档。正规点的会用 Swagger 或者 YApi 这类工具生成，里面写着请求地址、参数怎么传、返回长什么样。比如你要查用户信息，可能是这样：

{
  "url": "https://api.example.com/user/info",
  "method": "GET",
  "params": {
    "user_id": 12345
  },
  "response": {
    "code": 0,
    "data": {
      "name": "张三",
      "age": 28
    }
  }
}

写代码试试看

现在用 JavaScript 写个简单的请求，比如用 fetch：

fetch('https://api.example.com/user/info?user_id=12345')
  .then(res => res.json())
  .then(data => {
    console.log('用户信息：', data);
  })
  .catch(err => {
    console.error('请求失败：', err);
  });

如果返回的数据结构和文档对得上，那就说明通了。要是报错，先看看是不是 URL 拼错了，或者少了 token 这类认证信息。

处理常见坑点

很多人卡在跨域问题上。你在本地开发时，浏览器地址是 http://localhost:3000，而接口是 https://api.example.com，这就跨域了。解决办法要么让后端开个 CORS，要么开发时用代理，比如在 Vite 里配个 proxy：

export default {
  server: {
    proxy: {
      '/api': 'https://api.example.com'
    }
  }
}

另一个常见问题是参数格式不对。有些接口要 JSON 格式传参，有些要 form-data，尤其是上传文件的时候。这时候看清楚文档里的 content-type 要求，别乱传。

调试工具帮你忙

别光靠猜，用工具试。Postman 或者 Apifox 这类软件，能让你手动填参数、看返回结果。比如你怀疑是 token 失效，直接在 Postman 里换一个试试，比改代码重跑快多了。

上线前再检查一遍

本地能跑通，不代表线上没问题。记得确认生产环境的接口地址是不是对的，别还连着测试服。另外，异常情况也得处理，比如网络断了、接口超时，别让用户看到一片空白。

API对接不是一次性的事儿。产品迭代，接口可能变字段、加校验。保持和后端的沟通，有变动及时调整，比出问题再查省心多了。