框架应用中如何高效完成API集成

做网站开发时，几乎绕不开API集成。尤其是用上了Vue、React或者Django这类主流框架后，前后端分离成了常态，数据得靠接口来传。这时候，怎么让框架和外部API顺畅对接，就成了实际开发中的关键一步。

选对方式，事半功倍

比如你在用Vue做一个后台管理系统，需要从后端获取用户列表。这时候不需要手动写XMLHttpRequest，直接用axios就行。框架本身提供了生命周期或响应式机制，配合API调用会很自然。

import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    const res = await axios.get('/api/users');
    this.users = res.data;
  }
};

这段代码在组件挂载后自动拉取数据，Vue会自动更新视图。整个过程清晰明了，没有多余的逻辑纠缠。

统一管理接口更省心

项目一变大，到处写fetch或axios就会乱。建议把所有API请求集中到一个文件里，比如建个 api/ 目录，每个模块对应一个JS文件。

// api/user.js
import axios from 'axios';

export const getUserList = () => axios.get('/api/users');
export const createUser = (data) => axios.post('/api/users', data);

之后在组件里导入函数即可使用，结构清楚，后期维护也方便。改地址或者加拦截器，只动一处就行。

别忘了处理错误和加载状态

真实场景中，网络可能超时，接口可能报错。只写成功逻辑迟早踩坑。在React里，可以结合useState来控制loading和error提示。

const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data))
    .catch(() => alert('加载失败，请重试'))
    .finally(() => setLoading(false));
}, []);

用户点击页面时看到转圈，比干等不知道啥情况要好得多。这种细节让产品显得更靠谱。

跨域问题怎么破

本地开发时，前端跑在3000端口，后端在5000，浏览器直接拦掉请求。这时候不是API不行，是CORS在起作用。解决办法有几个：后端加响应头、用代理、或者走Nginx转发。

在Vue CLI或Create React App里，可以在 package.json 加一行：

"proxy": "http://localhost:5000"

之后所有未识别的请求会自动转向后端服务，开发阶段够用了。

安全也不能马虎

调用第三方API时，像天气、地图这类服务通常要带key。千万别把密钥写死在前端代码里。一旦上线，源码人人能看，账号可能被刷停。

正确做法是通过自己的后端做个代理接口，前端请求本地路由，由服务器带上密钥去调外部API。既隐藏了凭证，又能做限流和缓存。

框架只是工具，真正让网站跑起来的是数据流动。把API集成这步走稳了，后续功能扩展才不会卡壳。