如何 Return 基于响应错误代码的自定义 axios 响应

Question

我正在尝试在我的 vue 应用程序中进行全局错误处理。我有一个 api.service.js 文件，其中包含我的 axios 和创建我的 get，post 函数：

/**
 * Service to call HTTP request via Axios
 */
const ApiService = {
  init(apiBaseUrl) {
    Vue.use(VueAxios, axios);
    Vue.axios.defaults.baseURL = apiBaseUrl;
  },

  /**
   * Set the default HTTP request headers
   */

  setHeader() {
    Vue.axios.defaults.headers.common[
      "Authorization"
    ] = `Bearer ${JwtService.getToken()}`;
  },

  setHeaderwToken(token) {
    Vue.axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  },

  /**
   * Send the GET HTTP request
   * @param resource
   * @param slug
   * @returns {*}
   */
   get(resource, slug = "") {
    var myBlob = new Blob([], {type:'text/plain'});
    var init = { status: 200, statusText: "" };
    var myResponse = new Response(myBlob, init);
   return Vue.axios.get(`${resource}/${slug}`)
    .catch((error) => {
      if (error.response.status == 401) {
        //401 response
        if (resource != "CheckToken") {
          // request isNot checktoken & 401 response, check if token is valid?
          Vue.axios
            .get("CheckToken") 
            .then((CheckTokenResponse) => {
              console.log("CheckToken response");
              if (CheckTokenResponse.data == "OK") {
                //token valid + 401 response
                init = { status: 401, statusText: "noAuthorityValid" };
                myResponse = new Response(myBlob, init);
                console.log(CheckTokenResponse);
                console.log("//token valid + 401 response");
                console.log(myResponse);
                return myResponse;
              } else {
                init = { status: 401, statusText: "noTokenValid" };
                myResponse = new Response(myBlob, init);
                console.log(CheckTokenResponse);
                console.log("//token NOT valid + 401 response");
                return myResponse;
              }
            })
            .catch(() => {
              init = { status: 401, statusText: "noTokenValid" };
              myResponse = new Response(myBlob, init);          
              return myResponse;
            });
        } else {
          //request is CheckToken + 401 response
          init = { status: 401, statusText: "noTokenValid" };
          myResponse = new Response(myBlob, init);
          console.log(error);
          console.log("//request is CheckToken + 401 response");
          return myResponse;
        }
      } else {
        // != 401 response
        console.log(error);
        console.log("!= 401 response");
        return error; 
      }
    });
  },

};

export default ApiService;

在我的 Vue 组件中，我正在调用我的 ApiService：

  ApiService.get("MyFunction")
    .then((response) => {
      console.log("MyFunction " + response);
    .catch((error) => {
      console.log("MyFunction " + error);
    });
},

我尝试创建自定义响应 (myResponse) 并 return 但它 return 为 undefined （我想这是一个错误的方法）我想要实现的是，当函数被调用并且 return 来自 api 的错误代码时， (500, 401, 404..) 我想抓住它，如果它是 401，那么我想调用“CheckToken”函数，然后如果 CheckToken returns“OK”我想 return“noAuthorityValid”（意味着令牌有效但该函数未经授权。 ), CheckToken 不行，然后我想 return noTokenValid 并且我想在我调用函数的 vue 组件中执行它：

  ApiService.get("MyFunction")
    .then((response) => {
      console.log("MyFunction " + response);
// if (response.statusText == noAuthorityValid)
{
// show snackbar("you are not authorized for this function")
}
})
    .catch((error) => {
      console.log("MyFunction " + error);
    });
},

Answer 1

我无法用 api.service.js 做到这一点，所以我创建了一个漫游。我在每个需要 axios 调用的组件中导入了 axios；

import axios from "axios";

然后我像这样使用 axios:

 axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Accept: "application/json",
        },
        url: "MyFunction",
        method: "get",
      })
      .then((response) => {....}

然后，在我的顶级组件（顶级父级）创建的函数中，我使用了 axios.interceptors.response 这样的：

axios.interceptors.response.use(
      (response) => {
        return response;
      },
      (error) => {
        this.handleError(error);
        return Promise.reject(error);
      }
    );

这是我的 handleError 函数：

handleError(error) {
  if (error.response.status == 401) {
    if (error.response.data.includes("expiredToken")) {
      this.showSnackbar("Token is expired");
      setTimeout(() => {
        if (!window.location.href.includes("login")) {
          this.$router.push({ name: "login" }).then(() => {
            this.$store.dispatch(LOGOUT); //PURGES user data,
          });
        }
      }, 2000);
    } else if (
      error.response.data.includes(
        "UnauthorizedFunction"
      )
    ) {
      this.showSnackbar("You are not authorized for this function ");
    } else {
      this.showSnackbar("Error occured.");
    }
  } else {
  this.showSnackbar("Error occured.");
  }
}

这个愚蠢的问题花了我 2.5 天..

如何 Return 基于响应错误代码的自定义 axios 响应

How to Return a custom axios response based on response's error code

javascript

error-handling

vue.js

axios

vuejs2