Question

我是ReactJS的新手，我有一个现有的AngularJS应用程序可以处理许多API，如何在ReactJS的通用文件/组件中定义所有API并在整个项目中使用它？

我已经通过在React的组件类中定义事件监听器来尝试正常方式。现在，我想在一个公共位置定义所有API。

<RaisedButton label="Submit" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>
handleClick(event){
//API1
}

我想在一个文件/组件中定义所有项目API，并将其用作：

handleClick(event){
//imported API1
}

我想要类似于AngularJS中的工厂的东西。我们如何在ReactJS中建立类似的结构？

Answer 1

我假设您想在单击按钮时向所有API发出请求。

您可以使用fetch或axios，两者都可以使您向特定的API端点发出请求。

如何使用提取示例： https://reactjs.org/docs/faq-ajax.html

如何使用axios的示例： https://www.npmjs.com/package/axios

handleClick函数可能看起来像这样。单击后，它会向多个API端点发出多个请求并检索来自所述端点的结果。

有帮助吗？

async handleClick(event){
//imported API1
const users = await axios.get('/api/users');

console.log(users.data); //logs out all users

const categories = await axios.get('/api/categories');
console.log(categories.data); //logs out all categories


}

如何在通用文件/组件中定义所有API？

1 个答案: