如何根据响应的错误代码返回自定义 axios 响应

Posted 2023-02-16

【中文标题】如何根据响应的错误代码返回自定义 axios 响应

【英文标题】：How to Return a custom axios response based on response's error code

【发布时间】：2021-11-07 19:29:03

【问题描述】：

我正在尝试在我的 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) 并返回它，但它返回为 undefined （我想这是一个错误的方法） 我想要实现的是， 当调用函数并从 api 返回错误代码时， （500、401、404..） 我想抓住它 如果是 401，那么我想调用“CheckToken”函数，然后如果 CheckToken 返回“OK”我想返回“noAuthorityValid”（表示令牌有效但该函数未经授权。），CheckToken 不正常，那么我想要返回 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);
    );
,

【参考方案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 天..