如何从 React 组件向后端发送 fetch post 请求

Question

我想从 React class 组件向服务器发送获取 post 请求。我从来没有获取 post。那么如何使用 thunk 从该组件执行此操作。

class Add extends Component {
 constructor(props) {
  super(props);
  this.state = {username: '', email:'', text:''};
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
 }
 handleChange(event) {
  this.setState({value: event.target.value});
 }
 
 handleSubmit(event) { 
                alert (JSON.stringify(this.state))
  event.preventDefault();
 }
 render(){
  return (
  <div className="addcontainer">
  <div style={{display: 'flex', justifyContent: 'center'}}>
  <h4>Add new task here:</h4>
  </div>
  <form onSubmit={this.handleSubmit}>
  <div className="wrapper">
   <label for="username"><b>Username</b></label>
   <input type="text" value={this.state.username} onChange={e => this.setState({ username: e.target.value })} placeholder="Enter Username" name="uname" required />
   <label for="email"><b>Email</b></label>
   <input type="text" value={this.state.password} onChange={e => this.setState({ email: e.target.value })} placeholder="Enter Email" name="email" required />
   <label for="text"><b>Text</b></label>
   <input type="text" value={this.state.password} onChange={e => this.setState({ text: e.target.value })} placeholder="Enter Task" name="text" required />
   <button className="login" type="submit">Add task</button> 
  </div>
  </form>
  </div>
  )
 }
}

我在文档中也有 jquery ajax 请求的例子，但对我帮助不大。请帮我用 fetch

写 thunk

  $(document).ready(function() {
    var form = new FormData();
    form.append("username", "Example");
    form.append("email", "example@example.com");
    form.append("text", "Some text");

    $.ajax({
        url: 'https://uxcandy.com/~shapoval/test-task-backend/create?developer=Example',
        crossDomain: true,
        method: 'POST',
        mimeType: "multipart/form-data",
        contentType: false,
        processData: false,
        data: form,
        dataType: "json",
        success: function(data) {
            console.log(data);
        }
    });
});

这是与 fetch get 一起使用的 thunk：

const getRepos = username => async dispatch => {
  try {
    var url = `https://uxcandy.com/~shapoval/test-task-backend/?developer=sait&sort_field=${username}`;
    const response = await fetch(url);
    const responseBody = await response.json();
    //console.log(responseBody.message.tasks);
    dispatch(addRepos(responseBody.message.tasks));
  } catch (error) {
    console.error(error);
    dispatch(clearRepos());
  }
};

Answer 1

您可以使用 fetch 函数的第二个参数来添加 options 例如

fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, cors, *same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
        "Content-Type": "application/json",
        // "Content-Type": "application/x-www-form-urlencoded",
    },
    redirect: "follow", // manual, *follow, error
    referrer: "no-referrer", // no-referrer, *client
    body: JSON.stringify(data), // body data type must match "Content-Type" header
})

更多信息请参考here

另一个使 api 命中的有效方法是使用 axios

如何从 React 组件向后端发送 fetch post 请求

How to send a fetch post request from react component to backend

reactjs

fetch-api