Reactjs 如何在react js的不同文件中保持rest api调用

我对react js是个新手，一直在做一些非常好的事情。但到目前为止，要进行的api调用是在各自的组件中定义的。因此，如果要对ip或端点进行任何更改，我需要在每个位置进行更改。如何将所有api调用分离到一个文件中，并对相应组件文件中的结果执行操作

以下是一个例子：

import axios from "axios";

function get_all_user(){
axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/app/users/",
    })
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })
      
}

function get_single_user(userid){

axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/app/users/"+userid,
    })
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })
      
}

---

在每个组件中，我都要进行api调用。所有这些api调用都需要位于一个位置。非常感谢您的帮助。

您可以将整个代码移动到另一个组件中，并在函数定义之前添加单词

export

，如：

export function get_all_user(){
  // rest of code
}

然后你只需要把它导入你的组件中

import { get_all_user } from './path/to/file/'

因此，您可以通过以下方式在多个文件中使用它们：

get_all_user()

例如，它是您导出函数的

text.js

文件，在

index.js

文件中，您只需使用它

就可以使用axios，将Api配置保存在一个文件中，然后导入并使用

/api.js

import axios from "axios";
export const axiosRequest = axios.create({
  baseUrl: "https://jsonplaceholder.typicode.com/"
});

/app.js

import React from 'react';
import { axiosRequest } from './api';
export default function App() {

  React.useEffect(()=>{
    axiosRequest.get('/todos/1')
    .then(res=>console.log(res))
    .catch(err=>console.log(res))
  },[])
  
  return <>axios</>
}

从“React”导入React；
从“/api”导入{axiosRequest}；
导出默认函数App（）{
React.useffect（（）=>{
axiosRequest.get（'/todos/1'）
.then（res=>console.log（res））
.catch（err=>console.log（res））
},[])
返回轴
}

---

下面是一个工作代码示例：

查看我的答案，它应该会帮助您：）是的，我已经尝试过了，但是得到了这个“TypeError:无法读取未定义”错误的“then”属性。@liquiddeath因为您需要返回数据，然后只有您才能在另一个文件中使用它，return Promise.resolve（response.data）@SudarshanRai如何做到这一点？你能给我举个例子吗。这是我与react的第一个项目js@liquiddeath你们可以看到我的答案，我已经做了更简单的方法，你们可以尝试，我一直保持baseurl为。正如你所说的那样。但请求中未包含应用程序。看起来不应该给我看你的代码