如何解决重复调用Ajax完成链式显示？

Question

当我们使用Ajax技术在网页前端显示内容的时候，经常会遇到这种情况，在对象A调用Ajax显示完成之后，再调用Ajax显示B，然后再B显示完成之后，再调用Ajax显示C，……，如此循环，就形成了一个长长的显示链条，如果顺次编程就会让整个的程序变得很长，维护起来也非常不容易，特别是当每次调用Ajax之后再执行的程序又是重复的情况下，就更显得浪费工时了。这个问题应该如何解决？有没有通用的方法？如果有网友希望了解这个问题的更多信息，可以私信我。

Answer 1

参考钉钉个人版人工智能：

可以使用Promise和async/await来解决这个问题。首先，将所有的ajax请求封装成一个方法，然后使用Promise来处理异步操作。最后，使用async/await来简化代码。

以下是一个示例：

// 封装ajax请求
function ajaxRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4) {
        reject(new Error('请求失败'));
      }
    };
    xhr.send();
  });
}

// 使用async/await简化代码
async function displayChain() {
  try {
    const resultA = await ajaxRequest('urlA');
    displayContent(resultA); // 显示内容A

    const resultB = await ajaxRequest('urlB');
    displayContent(resultB); // 显示内容B

    const resultC = await ajaxRequest('urlC');
    displayContent(resultC); // 显示内容C
  } catch (error) {
    console.error(error);
  }
}

// 调用displayChain函数开始链式显示
displayChain();

这样，你就可以将整个链式显示的过程简化为一个displayChain函数，使代码更加简洁和易于维护。