Axios 在 then 之外更新值以打破循环

Question

我目前仍在学习使用 React Native。

我想要做的是将限制值更新为 1，这样它会破坏 while 循环，但我不确定如何执行它，因为我无法从 .then() 内部更新值在 Axios POST 调用中。 很高兴有人能指出任何处理此问题的方法。感谢您的帮助。

var limit = 0;
        while (limit == 0) {
          running = running + 20;
          console.log("restart");
          postDataCalories = {
            "query": `${running} minutes run and ${walking} minutes walking`,
            "gender":"male",
            // "nf_calories": 363.62,
            "weight_kg":63.5,
            "height_cm":167.64,
            "age":30
          };
          console.log(`${running} minutes run and ${walking} minutes walking`);
          axios.post('https://trackapi.nutritionix.com/v2/natural/exercise', postDataCalories, axiosConfig2)
          .then((res3) => {
            console.log("exercise RESPONSE RECEIVED: ", res3);
            let caloriesFood = res2.data.foods[0].nf_calories;
            let caloriesExercise = res3.data.exercises[0].nf_calories;
            let caloriesDifferences = caloriesFood - caloriesExercise;
            console.log("hi " + caloriesDifferences);
            if (caloriesDifferences < 50){
              console.log('done');
              limit = 1;
            } else {
              console.log('nope');
            }
          })
        }

Answer 1

在您的情况下，您不能中断 then 函数内的 while 循环，因为该函数是在不同的时间调用的（他们称之为异步）。

您可以做两件事。如果您可以在您的环境中访问 await/async，您可以将其重写为：

async someFunction() { 
        var limit = 0;
        var running = 1;  // arbitrarily start at 1.
        while (limit == 0) {
          running = running + 20;
          console.log("restart running " + running);
          postDataCalories = {
            "query": `${running} minutes run and ${walking} minutes walking`,
            "gender":"male",
            // "nf_calories": 363.62,
            "weight_kg":63.5,
            "height_cm":167.64,
            "age":30
          };
          console.log(`${running} minutes run and ${walking} minutes walking`);
          var res3 = await axios.post('https://trackapi.nutritionix.com/v2/natural/exercise', postDataCalories, axiosConfig2)

            console.log("exercise RESPONSE RECEIVED: ", res3);
            let caloriesFood = res2.data.foods[0].nf_calories;
            let caloriesExercise = res3.data.exercises[0].nf_calories;
            let caloriesDifferences = caloriesFood - caloriesExercise;
            console.log("hi " + caloriesDifferences);
            if (caloriesDifferences < 50){
              console.log('done');
              limit = 1;
              // you may also do:
              break;
            } else {
              console.log('nope');
            }
          }
        }
}

对于通常的网络条件，它需要现代浏览器 (Firefox/Chrome)（或者当你有 babel / regenerator-runtime 时可能会成功，也许你的设置已经能够编译/运行它。）

如果您无权访问 async/await，那么您需要应用递归（以解决同步问题）。通常您可以按顺序执行任务（连续、逐步、使用 while 循环），现在您可以编写如下内容：

function runTheLoop(running, walking) {
          postDataCalories = {
            "query": `${running} minutes run and ${walking} minutes walking`,
            "gender":"male",
            // "nf_calories": 363.62,
            "weight_kg":63.5,
            "height_cm":167.64,
            "age":30
          };
          console.log(`${running} minutes run and ${walking} minutes walking`);
          axios.post('https://trackapi.nutritionix.com/v2/natural/exercise', postDataCalories, axiosConfig2)
          .then((res3) => {
            console.log("exercise RESPONSE RECEIVED: ", res3);
            let caloriesFood = res2.data.foods[0].nf_calories;
            let caloriesExercise = res3.data.exercises[0].nf_calories;
            let caloriesDifferences = caloriesFood - caloriesExercise;
            console.log("hi " + caloriesDifferences);
            if (caloriesDifferences < 50){
              console.log('done');
              // limit = 1;
              return;
            } else {
              console.log('nope');
 
              // This is the recursive variant of "running the loop again"
              return runTheLoop(running + 20, walking + 20);
            }
          })
        }
    }


// Somewhere:
console.log("restart");
// one minute of walking and one minute of running.
runTheLoop(1, 1);

注意：我已经使用您的代码来制作与您的情况相关的示例，我无法自己测试它，因此如果您复制并粘贴它可能无法直接工作。