javascript - AJAX + promise : Chaining AJAX calls not working

Question

我正在尝试向 php 页面 (delete_post.ajax. php)，它从我的 AJAX 调用中获取数据，并使用它从我的数据库中删除一个项目。之后，我希望我的 AJAX 向另一个页面 (api/blog.php) 发出一个 GET 请求，该页面查询数据库的其余部分该表中的项目。

到目前为止，我能够从数据库中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']);

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

<?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;

include('../includes/db/read/blog_roll.query.php');

<?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 中执行此操作)。

then 只有在您解决或拒绝 promise 时才会做某事。因为没有错误，所以它不会被拒绝，也没有解决它的条件。

(您确实为 get 解决了它)。