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);
}

Answer 1

你可以在catch部分尝试这个：

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

Answer 2

您可以像建议的PanJunjie潘俊杰一样验证自己，或者使用像sindresorhus/is-reachable这样的库。后者将是我的首选。

干杯！

Answer 3

您应该执行@chithra在.then()中指出的相同验证，因为在服务器停机的情况下测试请求时，我遇到了一个奇怪的问题，“响应”就好像成功了。 / p>

此外，在.then()上用response.status代替 response.error

Answer 4

您可以使用拦截器：

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

        return Promise.reject(error)
    }
)

Answer 5

通过使用 npm； JavaScript 运行时环境 Node.js 的标准包管理器。

使用 npm：

npm i axios

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

import axios from 'axios';

您需要在生命周期挂钩上调用它。在这里，我们将使用 beforeCreated() 生命周期钩子，这是因为我们将能够检索通过 created 钩子处于活动状态的敏感数据和事件。

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

如何处理Axios中的net :: ERR_CONNECTION_REFUSED - Vue.js

5 个答案: