Question

我有一个循环，该循环最多要调用5个API端点才能验证ids。在完成循环之前，我的增量变量在第一次迭代时从0变为1。

我指出在控制台在请求之前和之后的每个回调中记录变量之后，无论请求是好还是坏，都会发生这种情况。一旦在.then回调或.catch回调中调用了变量，索引就会增加，我也不知道为什么。我测试了不同的变量名称，但仍然得到相同的结果。有人对此有想法吗？

我也将.fetch()方法与React一起使用，并且.then函数中也发生了同样的事情，因此我认为这不是axios特有的。

这是我的功能：

isValidAIN(ains) {
  var control = this;
  var length = ains.length;

  if (ains.length > 0) {
    for (var i = 0; i < length; i++) {
      if (ains[i].length !== 10) {
        if (ains[i].length === 0) {
          this.state.errors["ain[" + i + "]"] = "";
          this.state.validAINS[i] = true;
        } else {
          this.state.errors["ain[" + i + "]"] = "This AIN Number Must Contain 10 Digits";
          this.state.validAINS[i] = false;
        }        
        this.setState(this.state);        

      } else {
        // v this logs 0
        console.log("i: ", i);

        axios
          .get("/myendpoint/?ain=" + ains[i])
          .then((res) => {
            //  v this logs 1
            console.log("in then: ", i);
            console.log("res: ", res);
            control.state.errors["ain[" + i + "]"] = "";
            control.state.validAINS[i] = true;
            control.setState(control.state);
          })
          .catch((err) => {
            //  v this logs 1
            console.log("i in catch", i);

            if (err.response.status == 404) {
              control.state.errors["ain[" + i + "]"] = "AIN Is Invalid";
              console.log(control.state.errors["ain[" + i + "]"]);
              control.state.validAINS[i] = false;
              control.setState(control.state);
              return false;
            }
          });

        // fetch("/myendpoint/?ain=" + ains[i])
        // .then(res => res.json())
        // .then(
        //     (result) => {
        //         console.log("success: ", result);
        //         if(result == null) {
        //             control.state.errors["ain[" + i + "]"] = "AIN Is Invalid";
        //             control.state.validAINS[i] = false;
        //             control.setState(control.state);
        //             return false;
        //         }
        //         else {
        //             control.state.errors["ain[" + i + "]"] = "";
        //             control.state.validAINS[i] = true;
        //             control.setState(control.state);
        //         }
        //     },
        //     (error) => {
        //         console.log("error: ", error);
        //     }
        // )
        // .catch( 
        //     (err) => {
        //         console.log("Error from catch: ", err);
        //     }
        // )
      }
    }
  } else {
    return false;
  }
}

Answer 1

因为axios调用是异步的。

您正在执行一个for loop循环的ains.length，这发生在几毫秒内。您将i定义为一个变量，该变量在for循环中的每个循环之后都会递增。

因此，如果您位于then / catch中，则变量i已经达到最大值（在您的情况下为1）。

i是变量，而不是常量。使用i时，是指内存中的该指针。如果希望i在每个循环中都是唯一的，则应将其定义为let而不是var。这将为每次循环调用创建i的唯一值。

Answer 2

axios请求是异步的，用var声明的变量的范围是封装函数。当axios请求完成时，此变量将是循环的最大值，因为循环是同步且完整的。

将var的{{1}}更改为let，改为使用块作用域。

为什么Axios .then和.catch函数会增加我的索引？

2 个答案: