时间戳

首页 > 解决方案 > 如何在单独的组件/文件中进行 axios API 调用？

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

问题描述

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

例子：

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

谢谢之前

标签： javascriptreactjs

解决方案

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 是唯一的救星。

推荐阅读