javascript - 如何使用 actions 在 React es6 和 axios 中发布数据

Question

我正在尝试使用 axios 发布数据。我可以让 api 调用工作，但我遇到的问题是在服务器端处理数据。 php 中正常的 $_POST 参数为空。

我有以下操作

export const UPDATE_CONTENT = 'update_content';

export function updateContent(values) {
    console.log(values);
    let obj = {};
    obj['params'] = values;
    console.log(obj);
    const request = axios.post(`/api/admin/rename/content/management/format/json`,JSON.stringify(values));
    return {
        type: UPDATE_CONTENT,
        payload: request
    };
}

values 是一个键值对象

{content : "<p>html text</p>",id:"21"}

当我发布使用像 axios.post(url,values); 时，请求参数显示为有效负载，$_POST服务器端是空的。

当我使用 JSON.stringify 时，$_POST 不为空，但它不会在请求中作为正确的键值对发送。我得到以下内容

Array
(
    [{"id":"21","content":"<p>html text</p>"}
)

所以在服务器端我必须做 $_POST = json_decode(file_get_contents('php://input'), true);

我该如何解决这个问题，这样我就不必这样做 $_POST = json_decode(file_get_contents('php://input'), true);

Answer 1

默认情况下，axios 将 JavaScript 对象序列化为 JSON，因此只能使用 file_get_contents("php: 从 "php://input" 读取它。//输入”)。检查documentation

如果您想避免这种情况，可以以 application/x-www-form-urlencoded 格式发送数据

您可以使用 URLSearchParams 来完成此操作，例如

var params = new URLSearchParams();
params.append('content', '<p>html text</p>');
params.append('id', '21');
axios.post(`/api/admin/rename/content/management/format/json`,params);

或者您可以使用 querystring模块如下:

var querystring = require('querystring');
axios.post('/api/admin/rename/content/management/format/json', querystring.stringify({"id":"21","content":"<p>html text</p>"}));

但是，修复此问题后，您将需要在客户端的操作创建器中处理异步操作。请参阅Handling async request with React, Redux and Axios?为了解决这个问题