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

Question

我有一个循环，最多对 API 端点进行五次调用来验证 ids。在完成循环之前的第一次迭代中，我的增量变量从 0 变为 1。

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

我还在 React 中使用了 .fetch() 方法，并且 .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请求是异步的，用var声明的变量的范围是封闭函数。当 axios 请求完成时，该变量将是循环的最大值，因为循环是同步且完整的。

将 var 更改为 let，让 i 使用 block 作用域。

for(let i = 0; i < length; i++) { ... }