如何使用 axios 管理 ReactJS 中的不同 API 端点

Question

这里我有我的第一个表单，它从控制台中的提交按钮给出值 userid 和值 1、2 或 3，就像这样 {userId: "1243", Submit: "1"} 所以他们将值发布到api（codesandbox 中的第 124 行）

  `.post(`https://jsonplaceholder.typicode.com/posts`, payload)` 

然后我有另一个表单，其中三个按钮 nSubmit1、nSubmit2 和 nSubmit3 也假设以相同的格式发送值（就像这样{userId：“1243”，submit：“1”}），

PostForm.jsx 文件中的第 168 行

  <form>
   <button
            value={submit1}
            onClick={() => this.submitHandler(this.state.submit1)}
          >
            nSubmit1
          </button>
          <button
            value={submit2}
            onClick={() => this.submitHandler(this.state.submit2)}
          >
            nSubmit2
          </button>
          <button
            value={submit3}
            onClick={() => this.submitHandler(this.state.submit3)}
          >
            nSubmit3
          </button>
   </form>

但是对于 diff api，我在哪里以及如何定义第二个 api 并将我的提交值映射到它...userId 应该是两个 api 的通用值

https://codesandbox.io/s/vigorous-ptolemy-p1s4i?file=/src/components/PostForm.js

我还需要以“jsonplaceholder.typicode.com/posts?loadId=${this.userId}&eventName=${this.eventName}”的格式发送有效负载

Answer 1

如果您想以可扩展的方式管理许多端点，我建议您创建一个单独的文件，例如将其命名为 api.js，并在那里创建不同的 axios 实例：

import axios from 'axios'

export const api1 = axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/",
    headers: {
        // You can add some headers here like Token....
        Authorization: "Any Auth Token"
    },
})

export const api2 = axios.create({
    baseURL: "https://myOwnApi.com/",
    headers: {
        // You can add some headers here like Token....
        Authorization: "Any Auth Token"
    },
})


export const api3 = axios.create({
    baseURL: "https://AnotherGreatApi.com/",
    headers: {
        // You can add some headers here like Token....
        Authorization: "Any Auth Token"
    },
})

然后你可以将它导入到你的组件中

import React from "react";
import { api1, api2, api3 } from "./api.js";

class PostForm extends React.Component {
  state = {
    userId: "",
    submit1: "1",
    submit2: "2",
    submit3: "3"
  };

  buildPayload = submitName => {
    return { userId: this.state.userId, [`submit`]: submitName };
  };

  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler1 = (api, submitName) => {
    const payload = { userId: this.state.userId, [`submit`]: submitName };
    api.post("/post", payload);
  };

  submitHandler2 = (api, eventName) => {
    const payload = { loadId: this.state.userId, eventName };
    api.put("/someRoute", payload);
  };

  submitHandler3 = (api, anotherParam) => {
    const params = { ID: this.state.userId, anotherParam };
    api.get("/someRoute", params);
  };

  render() {
    return (
      <form onSubmit={e => e.preventDefault()}>
        <div>
          <input
            type="text"
            name="userId"
            value={this.state.userId}
            onChange={this.changeHandler}
          />
        </div>
        <button  onClick={() => this.submitHandler1(api1, this.state.submit1)}>Submit1</button>
        <button  onClick={() => this.submitHandler2(api2, "eventName1")} >Submit2</button>
        <button onClick={() => this.submitHandler3(api3, this.state.submit3)} >Submit3</button>
      </form>
    );
  }
}

export default PostForm