Reactjs应用程序中的典型文件结构：将api.js中的API调用分组

Question

只是想知道如何在我的React App中将我所有的API调用归为一个api.js文件（只需一些伪代码即可）。我读了一篇有趣的文章，介绍了这个想法，我很好奇，因为该文件结构确实符合我的需求。会怎么样 此外，作者在评论中指出：

我通常只是将所有API调用都放入该文件中-它们通常是一小两行的函数，可以调用axios，而我只是将它们导出。

导出函数登录名（用户名，密码）{...}导出函数getFolders（）{...}等

但是我觉得它缺少复制它的细节。我是Java和React的新手。谢谢。

Answer 1

假设您正在使用axios进行HTTP调用，我想这很像这样：

api.js：

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

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

export function async 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语法并将其包装在一个小模块resolver.js中：

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

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

  return resolved;
}

和您的组件像：

// ...
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()也很好。

希望对您有所帮助！