Question

我是一名专注于前端开发的学生，主要是React和JavaScript。我现在遇到问题，我正在使用axios，但将来会有像axios这样更灵活的其他库。每次在动作创作者中，我都厌倦了写一个axios电话。我想为我的API方法编写一个可重用的组件，比如我可以将它们拖到我的reducer文件中来使用它。当我想要更改它时，我没有通过我的所有组件来更改axios.get。

import Axios from 'axios'


 export function GetApiData() {
        return function () {
            Axios.get('/api').then(response=>{
               console.log(response.data);
            });
        }
    }

我听说在生产环境中，公司使用可重用的组件来处理这种情况。我正在寻找一个可重用的组件，如下所示：

import {get, post} from 'some file'

// code using get or post to make an axios call

并使用那些获取而不是Axios.get。我不擅长创建可重用的组件。

Answer 1

在你的src文件夹中，你可以创建一个你喜欢的任何名字的文件夹，在里面创建另一个js文件你喜欢什么名字。之后做这样的事情。检查这是你想要的
注意：该代码段不会运行。这仅适用于演示

＆＃13;

const Client={
    login:(phone,key)=>{
         //here change it  to  your desired function like axios.get or  anything
       return fetch(
            `https://example.com/api/account/login`,
            {
                method:'POST',
                accept:'application/json',
            }
        ).then((response)=>response.json());
    },
    //write bunch of methods like the above

}



export default Client;

＆＃13;

之后将其导入到您想要使用它的任何地方。使用它并告诉我是否发生任何问题

说你想在文件中使用它你可以做到

import Client from "yourfoldername/filename";


//call to client
 // i believe your api call returns a promise
Client.login(parameters).then((res)=>{
      //do something here
  }
).catch(err=>{
    //do something here
})

如何为axios.get和axios.post编写可重用的组件？

1 个答案: