如何在Axios - Vue.js中处理net::ERR_CONNECTION_REFUSED错误

Question

以下是我的连接请求代码:

doLogin(this.login).then(response => {
        var token = response.data.token;
        localStorage.setItem('AUTH_TOKEN', JSON.stringify(token));
        this.$router.push({name: 'Devices'});
        });
      }).catch(error => {
        console.log(error.response.data.message);
      });

catch() 部分对于HTTP错误（如 400，404，403 等）效果很好。但是当我的服务器离线时，这个脚本会抛出 net::ERR_CONNECTION_REFUSED 错误。有没有办法处理这个错误并让前端用户知道服务器目前已经离线？

以下是 doLogin () 函数，以防万一。

function doLogin(data) {
  const url   = 'http://localhost:3000/authenticate';
  return axios.post(url,data);
}

- Jithesh Kt

---

你正在打印 error.response.data.message。你尝试过只记录 error 吗？ - DrColossos

https://dev59.com/vHVC5IYBdhLWcg3wxEJ1 - JJPandari

Answer 1

在 catch 部分，您可以尝试这样做：

catch(error => {
        if (!error.response) {
            // network error
            this.errorStatus = 'Error: Network Error';
        } else {
            this.errorStatus = error.response.data.message;
        }
      })

- chithra

---

这样做无法区分net::ERR_CONNECTION_RESET和net::ERR_CONNECTION_REFUSED等错误状态，还有可能出现其他错误。 - Yuriy Petrovskiy

我正在开发一个使用API的Vue JS应用程序，我遇到了类似的问题，这对我来说很有效，但问题是每个发送到后端API的请求都需要放置这个。但是，在一个地方放置它处理的最佳方法是什么？ - Ruby4Rails

@Ruby4Rails - 为您的API构建一个服务类，每种类型都有一个方法，例如get()，post()，delete()或其他。然后，无论在API中调用方法的位置在哪里，您都可以始终处理这些边缘情况。 - fullStackChris

Answer 2

您可以使用拦截器:

axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        if (!error.response) {
            console.log("Please check your internet connection.");
        }

        return Promise.reject(error)
    }
)

- Sinan Eldem

---

太好了。我刚把这个代码放在我的 NextJS（React）_app.js 文件的 useEffect() 中，使用 React 的全局上下文，在任何地方显示 Material-UI 的 Snackbar。 - KeitelDOG

Answer 3

你应该在.then()中执行与@chithra指出的相同的验证，因为当我的服务器关闭时，我在测试请求时遇到了奇怪的问题，"response"会像成功一样返回。

另外，在.then()中使用response.status而不是response.error。

- Leo

Answer 4

通过使用npm，一个针对JavaScript运行环境Node.js的标准包管理器。

使用npm：

npm i axios

接下来，您应该在src/App.vue文件中导入Axios。

import axios from 'axios';

你需要在生命周期钩子上调用它。这里我们将使用beforeCreated()生命周期钩子，因为我们能够检索到与beforeCreated钩子活动相关的敏感数据和事件。

 data() {
return {
  network: false,
}; },
beforeCreate() {
axios
  .get("http://localhost:13172/api/product/getproducts")
  .then((response) => {
    console.log(response);
    this.network = true;
  })
  .catch((error) => {
    console.log(error), (this.network = false);
  }); }

- shahrokh1111g