使用Promise发送带参数POST请求时出现PHP未定义索引错误

嘿，别怀疑Promise的能力！你遇到的问题根本不是Promise传不了参数，而是漏了设置POST请求必须的Content-Type请求头。

为啥原生XHR能跑通？ #

有些浏览器比较“贴心”，当你发送limit=2这种application/x-www-form-urlencoded格式的字符串时，会自动帮你加上Content-Type: application/x-www-form-urlencoded这个请求头。服务器（PHP）看到这个头，就知道要把参数解析到$_POST数组里。但你的Promise封装代码里没手动加这个头，服务器识别不了参数格式，自然就报“未定义索引”了。

改一行代码就解决 #

只需要在req.open()之后、req.send()之前，加一行设置请求头的代码就行：

function postAjaxCall(url, data) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('post', url);
    // 就是这行！告诉服务器参数是表单编码格式
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send(data);
  });
};

额外提个醒 #

如果以后你要传JSON格式的参数（比如{limit: 2}），那得做两个调整：

• 把对象转成JSON字符串：JSON.stringify(data)
• 把请求头改成Content-Type: application/json
• PHP那边要通过file_get_contents('php://input')来获取并解析参数，而不是用$_POST

显式设置请求头是个好习惯，能避开不同浏览器的奇怪差异，让请求更稳定~

内容的提问来源于stack exchange，提问作者user348246