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

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

例如：

我创建了index.jsx文件，其中包含要集成

axios

的组件，然后我创建了

app.jsx

文件，以在

index.jsx

文件中呈现包含axios的index.jsx文件

---

感谢您，您可以为所有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成为必要条件，您可以使用它 否则不要滥用它

---

PS:Axios基于可取消承诺模式。它有它的中止控制器。简而言之，您可以取消任何挂起的网络调用，这是使用Observable的一个很好的替代方法。取消API调用有时非常重要，因为在当前API请求之间导航到另一个页面时，您并不需要数据，因此数据是无用的，AXIOS是唯一的救星。

您可以使用

导出
动态导入
函数
/
方法

创建一个shared.js文件。例如，将其命名为：apicalls.js

在内部按如下方式编写函数：

apicall.js

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);
      }
    })
}

// get the location of your apicalls.js file and use to import like below
import { getData } from '../../routetothisjsfile'


//use it 
var config = { "Access-Control-Allow-Origin": "*" }
getData(config, (res) => {
    //success
},(err) => {
    //error
    alert(err);
});

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

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);
      }
    })
}

// get the location of your apicalls.js file and use to import like below
import { getData } from '../../routetothisjsfile'


//use it 
var config = { "Access-Control-Allow-Origin": "*" }
getData(config, (res) => {
    //success
},(err) => {
    //error
    alert(err);
});

你能发布一些代码吗？嗨@nadzief。我们很高兴。建议您在寻求帮助时与他人一起添加代码段。您可以将redux与react一起使用。@Nadzief您知道一般如何使用导入/导出吗？如何从不同的文件调用函数？如果没有，请仔细阅读。这是一个很棒的解决方案。您能否展示我们如何将您的代码与取消实现一起使用，以便在新请求变老时，挂起的请求被取消如何在公共文件中添加微调器？比如改变状态真/假