Question

如何在单独的组件/文件中进行axios API调用？

示例：

我创建了index.jsx文件，其中包含要集成axios的组件，然后我创建了app.jsx文件，以在index.jsx文件中呈现包含axios的index.jsx文件。

先感谢

Answer 1

您可以为所有API创建一个单独的文件夹api：

假设您有AuthenticationAPI，您必须输入以下内容：

AuthenticationAPI.js

import axios from 'axios';

export const onAuthenticate = payload => {
  const URL = `YOUR_URL`;
  return axios(URL, {
    method: 'POST/GET',
    headers: {
      'content-type': 'application/json', // whatever you want
    },
    data: payload,
  })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });
};

在您的App.js中

import * as AuthenticateAPI from 'api/AuthenticationAPI';

 // in your CDM
 componentDidMount(){
  AuthenticateAPI.onAuthenticate(payload).then((res)=>{ //any payload you want to send just for example
    you can get response here in then block
 }) 
 }

这是为了基本示例。如果redux成为 NECESSITY ，则可以使用redux 否则请勿滥用。

PS： Axios 基于可取消的承诺模式构建。它具有中止控制器。简而言之，您可以取消任何待处理的网络呼叫，这是使用Observable的绝佳选择。有时候，当您在进行中的API请求之间导航到另一个页面时确实不需要数据时，取消API调用确实很重要，因此数据无用，而AXIOS是唯一的救星。

Answer 2

您可以使用foo.get_text(strip=True, seperator='\n')即时导入functions / methods

创建一个shared.js文件。例如称它为：apicalls.js

在内部这样编写函数：

apicalls.js

export

在任何组件中，请按以下方式使用

import axios from 'axios';

export function getData(config, callback, errorcallback){
    axios.get(url, config)
    .then(res => {
      //do something
      if(callback != null){
         callback(res);
      }
    })
    .catch(err => {
      // catch error
      if(errorcallback != null){
         errorcallback(err);
      }
    })
}

如何在单独的组件/文件中进行axios API调用？

2 个答案: