Reactjs应用程序中的典型文件结构:在API中分组API调用。js公司

假设您使用axios进行http调用,我想应该是这样的smth:

应用程序编程接口。js公司:

import axios from 'axios';
import { resolve } from './resolve.js';

export async function login(user, pass) {
  return await resolve(axios.post('http://some-api.com/auth', { user, pass }).then(res => res.data));
}

export async function getUser(id) {
  return await resolve(axios.get(`http://some-api.com/users/${id}`).then(res => res.data));
}

// and so on....

正如他在帖子中所说,如果你的文件开始变得太大,你可以创建一个 src/api/ 并创建单独的文件,如 src/api/auth.js , src/api/users.js 等

为了解决承诺,我喜欢使用新的 async/await 语法并将其包装在一个小模块解析器中。js公司:

export function async resolve(promise) {
  const resolved = {
    data: null,
    error: null
  };

  try {
    resolved.data = await promise;
  } catch(e) {
    resolved.error = e;
  }

  return resolved;
}

以及您的组件smth,如:

// ...
componentDidMount() {
  this.getUser();
}

async getUser() {
  const user = await api.getUser(this.props.id);
  if(user.error)
    this.setState({ error: user.error });
  else
    this.setState({ user: user.data });
}

同样,这是我喜欢做的事情,我认为代码看起来更清晰,保持同步结构。但我想你可以用 .then() 和 .catch() 而且

我希望这有帮助!

这取决于一个项目有多少API函数。 我通常坚持中提到的名为“按文件类型分组”的项目结构 React official website 并将API相关文件保存在单独的目录中,其中每个文件都具有专用于特定实体的API功能。

然而,对于小型项目,将所有API功能保存在一个文件中是有意义的。