AJAX + Promises：链接AJAX调用不起作用

Question

我尝试向POST页面（DELETE）发送php（技术上是delete_post.ajax.php）请求，该页面从我的{AJAX获取数据{1}}调用，并使用它从我的数据库中删除一个项目。之后，我希望我的AJAX向另一个页面（GET）发出api/blog.php个请求，该页面向数据库查询该表中的其余项目。

到目前为止，我能够DELETE数据库中的项目，但是当链接到.then()时，它不会像我期望的那样链接。

如果我访问...api/blog.php，该页面会按预期返回有效的JSON。

JS AJAX

const deletePostBtn = document.querySelectorAll('button[name="delete_post"]');

// GET REQUEST TO RETRIEVE EVERY POST
const get = (url) => {
  return new Promise((resolve, reject) => {
    const xhttp = new XMLHttpRequest();

    xhttp.open('GET', url, true);

    xhttp.onload = () => {
      if (xhttp.status == 200) {
        resolve(JSON.parse(xhttp.response));
      } else {
        reject(xhttp.statusText);
      }
    };

    xhttp.onerror = () => {
      reject(xhttp.statusText);
    };

    xhttp.send();
  });
}

// DELETE SPECIFIC POST
const deletePostPromise = (url, postID) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open('POST', url, true);

    xhr.onload = () => {
      if (xhr.status == 200) {
        console.log('if (xhr.status == 200)');
      } else {
        reject(xhr.statusText);
      }
    };

    xhr.onerror = () => {
      reject(xhr.statusText);
    };

    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    // console.log(`About to SEND ${postID}`);
    xhr.send(postID);
    // console.log(`Just SENT ${postID}`);
  });
}

// MAKING THE CALL TO DELETE THE POST
if (deletePostBtn) {
  for (let i = 0; i < deletePostBtn.length; i++) {
    deletePostBtn[i].addEventListener('click', e => {
      e.preventDefault();

      const displayPostSection = document.querySelector('.col-8.pt-4');
      const postID = document.querySelectorAll('#delete-post-id');

      deletePostPromise('http://localhost/mouthblog/ajax/delete_post.ajax.php', `id=${postID[i].value}`)
        .then(() => {
          console.log('DOES NOT MAKE IT TO THIS console.log');
        })
        .then(() => {
          get('http://localhost/mouthblog/api/blog.php')
            .then(data => {
              console.log(data);
            })
            .catch(error => {
              console.log(error);
            });
        });
    });
  }
}

delete_post.ajax.php（提交删除帖子的页面）

<?php

  include('../includes/db/connection.php');
  include('../includes/db/delete/delete_post.query.php');

  $delete_post = new DeletePost($_POST['id']);

包括（＆＃39; ../包括/分贝/删除/ delete_post.query.php＆＃39）;

<?php

class DeletePost extends Connection {
  public function __construct($id) {
    $this->connect();

    $sql = "DELETE FROM `posts`
            WHERE `id`=:id";
    $query = $this->connect()->prepare($sql);
    $result = $query->execute(
      [
        ':id' => htmlentities($id, ENT_QUOTES, 'ISO-8859-15'),
      ]
    );
  }
}

/api/blog.php（这是我的JSON来自的地方，返回所有帖子数据）

<?php

  include('../includes/db/connection.php');
  include('../includes/db/read/blog_roll.query.php');
  $get_data = new BlogRoll;

包括（＆＃39; ../包括/分贝/读取/ blog_roll.query.php＆＃39）;

<?php

class BlogRoll extends Connection {
  public function __construct() {
    $this->connect();

    $sql    = "SELECT `id`, `user_id`, `user_name`, `content`, `date_created`
               FROM `posts`
               ORDER BY `date_created` DESC";
    $query  = $this->connect()->prepare($sql);
    $result = $query->execute();

    if ($result) {
      $returnArray = [];

      while ($row = $query->fetch(PDO::FETCH_OBJ)) {
        array_push($returnArray, $row);
      }

      header('Content-Type: application/json;charset=UTF-8');
      exit(json_encode($returnArray));
    }
  }
}

Answer 1

对于deletePostPromise：在xhr.onerror内，您拨打reject()，但从未致电resolve()（我希望您在xhr.onload内进行此操作。）< / p>

then只会在您解决或拒绝承诺时执行某些操作。由于没有错误，因此不会被拒绝，并且没有条件可以解决它。

（您确实为get解析了它。）

Answer 2

简要阅读代码，我在deletePostPromise（）中看不到任何resolve（）函数。因此，当您在REST调用中出现错误时，您只能从Promise返回。