axios-POST 添加错误捕获后抛出错误：ReferenceError: axiosRequest is not defined答案

【问题标题】：Axios-POST throws error after adding error catch: ReferenceError: axiosRequest is not definedaxios-POST 添加错误捕获后抛出错误：ReferenceError: axiosRequest is not defined
【发布时间】：2020-01-13 20:13:06
【问题描述】：

我在我的 axios 请求的 catch 函数中添加了一个错误日志记录。自从我这样做以来，我得到了这个weird error：

03:21:09.131 Setting 1,2,3,4 on SER1 Visualization.vue:174
03:21:09.132 Object { pin: (4) […], port: "SER1" } Visualization.vue:179
03:21:09.413
Error pin is not defined Visualization.vue:211
    axiosRequest Visualization.vue:211
03:21:09.415 Test Visualization.vue:213
03:21:09.415
undefined Visualization.vue:214
    axiosRequest Visualization.vue:214

注意： axios-post 请求不成功。这不是服务器的原因，因为当直接从 sendByte() 调用 axios.post 时它可以工作。

编辑：重建代码后，错误消失了。该错误以某种方式从先前再次被删除的提交中持续存在。由于我想了解错误，但我提供了下面的代码

这是执行 axios 请求的函数：

axiosRequest(payload, path, request) {
      if (request === "POST") {
        axios
          .post(path, payload)
          .then(response => {
            console.debug(
              `${path}? \n Status-Code ${response.status} - ${response.data.status} [${pin}]@${port}`
            );
            this.response = response.data;
          })
          .catch(error => {
            // Error ????
            if (error.response) {
              /*
               * The request was made and the server responded with a
               * status code that falls out of the range of 2xx
               */
              console.error(error.response.data);
              console.error(error.response.status);
              console.error(error.response.headers);
            } else if (error.request) {
              /*
               * The request was made but no response was received, `error.request`
               * is an instance of XMLHttpRequest in the browser and an instance
               * of http.ClientRequest in Node.js
               */
              console.error(error.request);
            } else {
              // Something happened in setting up the request and triggered an Error
              console.error("Error", error.message); // -> 211
            }
            console.debug("Test"); // -> 213
            console.error(error.config); // -> 214
          });
      }

这里是我调用它的方法：

sendByte(pin, port) {
      console.debug(`Setting ${pin} on ${port}`);
      var payload = {
        pin,
        port
      };
      console.debug(payload);
      this.axiosRequest(payload, this.paths.shift, "POST");
    },

有人能说出这意味着什么吗？

【问题讨论】：

Visualization.vue 的第 185 行是哪一行？
这是方法块的开头：methods: { .. 我现在在问题的位置添加了行号。
您确定您正在查看的代码是正在运行的代码吗？错误消息表明第 185 行应该在您的 sendByte 方法中。我也无法在您的代码中看到axiosRequest
那是因为 axiosRequest 不存在。但只是为了确保我会用我提供的东西重建它。
好的.. 显然这里有什么东西绊倒了。重建后，错误消失了......但只是为了澄清：axiosRequest 确实是一个函数，之前尝试将我所有的 axios 请求放入一个函数中。我应该提供那个代码吗？

标签： javascript vue.js error-handling axios

【解决方案1】：

第一个问题是由于运行的代码不是我在编辑器中看到的最新版本。我不应该太相信热插拔。

在文件历史中返回到 axiosRequest 函数仍然存在的位置后，我重新构建并在我的代码中发现了错误。

其实很简单：

.then(response => {
            console.debug( // here is the Reference Error -> Fix: [${payload.pin}]@${payload.port}
              `${path}? \n Status-Code ${response.status} - ${response.data.status} [${pin}]@${port}`
            );
            this.response = response.data;
          })

【讨论】：