如何在嵌套AJAX调用中传递变量？WordPress API异步问题

问题根源 #

你的getServerName函数里的AJAX是异步操作，直接调用它时，函数不会等待AJAX请求完成就返回了，所以你拿到的是undefined。必须等待异步请求完成后，再把服务器名称插入到DOM中。

jQuery 修复版本 #

修改getServerName让它返回AJAX请求的Promise，然后在渲染DOM前等待这个请求完成：

function getPosts(object, query) {
  jQuery.ajax({ 
    type: 'GET', 
    url: query,  
  })
  .then(function (data) {
      jQuery.each(data, function(i, post) {
        let siteTitle = post['title']['rendered'];
        let siteServer = '12'; // 实际应从post中获取对应ID
        
        // 等待服务器名称请求完成后再渲染DOM
        getServerName(siteServer).then(function(serverName) {
          jQuery(object).append(`
            <div class="get-post-item">
              <div class="site-title"><span>${siteTitle}</span></div>
              <div class="site-server"><span>${serverName}</span></div>
            </div>
          `);
        });
      });
    }
  )
}

// 修改后返回AJAX的Promise对象，让外部可以等待请求完成
function getServerName(id) {
  return jQuery.ajax({
    type: 'GET', 
    url: '/wp-json/wp/v2/servers/' + id
  })
  .then(function (data) {
    return data['title']['rendered'];
  });
}

如果想避免并行请求导致的DOM顺序混乱，可以改用async/await简化异步逻辑：

function getPosts(object, query) {
  jQuery.ajax({ 
    type: 'GET', 
    url: query,  
  })
  .then(async function (data) {
      // 改用for...of循环配合await，保证渲染顺序和文章顺序一致
      for (let post of data) {
        let siteTitle = post['title']['rendered'];
        let siteServer = '12';
        // 等待服务器名称请求完成
        let serverName = await getServerName(siteServer);
        jQuery(object).append(`
          <div class="get-post-item">
            <div class="site-title"><span>${siteTitle}</span></div>
            <div class="site-server"><span>${serverName}</span></div>
          </div>
        `);
      }
    }
  )
}

function getServerName(id) {
  return jQuery.ajax({
    type: 'GET', 
    url: '/wp-json/wp/v2/servers/' + id
  })
  .then(function (data) {
    return data['title']['rendered'];
  });
}

原生JavaScript 解决方案（使用Fetch API） #

现代浏览器推荐用原生Fetch API，语法更简洁且原生支持Promise：

async function getPosts(object, query) {
  try {
    const response = await fetch(query);
    const data = await response.json();
    
    for (const post of data) {
      const siteTitle = post.title.rendered;
      const siteServer = '12'; // 实际从post获取对应ID
      
      // 获取服务器名称
      const serverResponse = await fetch(`/wp-json/wp/v2/servers/${siteServer}`);
      const serverData = await serverResponse.json();
      const serverName = serverData.title.rendered;
      
      // 创建DOM元素并插入页面
      const postItem = document.createElement('div');
      postItem.className = 'get-post-item';
      postItem.innerHTML = `
        <div class="site-title"><span>${siteTitle}</span></div>
        <div class="site-server"><span>${serverName}</span></div>
      `;
      document.querySelector(object).appendChild(postItem);
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
}

优化建议 #

• 如果需要获取多个服务器ID，建议查看WordPress REST API是否支持批量获取服务器数据，减少HTTP请求数量提升性能。
• 可以先渲染文章标题占位，等服务器名称加载完成后再更新对应DOM节点，避免页面长时间空白。

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