如何从反应组件向后端发送 fetch post 请求答案

【问题标题】：How to send a fetch post request from react component to backend如何从反应组件向后端发送 fetch post 请求
【发布时间】：2019-06-07 07:43:23
【问题描述】：

我想从 react 类组件向服务器发送 fetch 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());
  }
};

【问题讨论】：

标签： reactjs fetch-api

【解决方案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

【讨论】：