如何在控制器中将VM变量传递至另一个AJAX请求？

嘿，我来帮你搞定这个问题！你已经用let vm = this保存了上下文，接下来核心要解决的是异步请求的顺序问题——因为AJAX是异步执行的，必须等第一个请求成功拿到ID后，再发起第二个请求，不然vm.data.id可能还没赋值就被用了。

下面给你两种可行的解决方案，按需选择：

方案一：在第一个请求的成功回调里直接调用第二个请求 #

这是最直接的写法，适合简单的依赖场景：

vm.retrieveId = () => {
  $.ajax({
    type: "GET",
    url: url, // 你的第一个请求URL
    dataType: 'jsonp',
    success: function(res) {
      // 把返回的结果赋值给vm.data，这样vm.data.id就会被自动设置
      vm.data = res;
      console.log('拿到的ID:', vm.data.id); // 可以先打印确认一下
      
      // 第一个请求成功后，立刻调用第二个请求
      vm.getPhotos();
    },
    error: function(err) {
      console.error('获取ID失败啦:', err);
    }
  });
};

vm.getPhotos = () => {
  // 先检查ID是否存在，避免报错
  if (!vm.data?.id) {
    console.error('还没拿到ID呢，没法请求图片～');
    return;
  }
  
  $.ajax({
    type: "GET",
    url: `http://webbtelescope.org/api/v3/image/${vm.data.id}`,
    dataType: 'json', // 根据实际接口要求调整类型
    success: function(photoData) {
      console.log('图片数据拿到啦:', photoData);
      // 这里可以把图片数据存到vm里，比如vm.photos = photoData
    },
    error: function(err) {
      console.error('获取图片失败:', err);
    }
  });
};

方案二：用Promise封装请求，配合async/await让代码更清晰 #

如果你的业务逻辑更复杂（比如有多个依赖请求），用Promise+async/await会让代码逻辑更易读：

// 把第一个请求封装成Promise
vm.retrieveId = () => {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "GET",
      url: url,
      dataType: 'jsonp',
      success: function(res) {
        vm.data = res;
        resolve(res.id); // 把拿到的ID传递出去
      },
      error: function(err) {
        reject(err); // 传递错误信息
      }
    });
  });
};

// 第二个请求也封装成Promise，直接接收ID参数
vm.getPhotos = (id) => {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "GET",
      url: `http://webbtelescope.org/api/v3/image/${id}`,
      dataType: 'json',
      success: function(photoData) {
        console.log('图片数据:', photoData);
        vm.photos = photoData;
        resolve(photoData);
      },
      error: function(err) {
        reject(err);
      }
    });
  });
};

// 用async/await按顺序执行请求
vm.initRequests = async () => {
  try {
    const id = await vm.retrieveId(); // 等第一个请求完成拿到ID
    await vm.getPhotos(id); // 用拿到的ID发起第二个请求
    console.log('所有请求都完成啦！');
  } catch (err) {
    console.error('请求过程出错:', err);
  }
};

// 调用初始化方法开始执行
vm.initRequests();

关键注意点 #

• 一定要处理异步顺序：不能在retrieveId还没执行完就直接调用getPhotos，否则vm.data.id会是undefined。
• 加错误处理：不管哪种方案，都要加上error回调或者try/catch，避免请求失败后程序卡住。
• 确认返回结构：要确保第一个请求返回的res里确实有id字段，不然vm.data.id会是undefined哦。

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