Axios 처리 오류

Axios 처리 오류

악시오스와의 Javascript 약속을 더 잘 이해하려고 합니다.내가 가장하는 것은 Request.js의 모든 오류를 처리하고 요청 함수를 사용할 필요 없이 어디서든 호출하는 것입니다.catch().

이 예에서는 요구에 대한 응답은 400 이며 JSON 에 오류 메시지가 표시됩니다.

다음과 같은 오류가 발생합니다.

Uncaught (in promise) Error: Request failed with status code 400

제가 찾은 유일한 해결책은.catch(() => {})Somewhere.js. 하지만 난 그렇게 하지 않으려고 노력중이야.가능합니까?

코드는 다음과 같습니다.

Request.js

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }

  ...

  return axios(config).then(
    function (response) {
      return response.data
    }
  ).catch(
    function (error) {
      console.log('Show error notification!')
      return Promise.reject(error)
    }
  )
}

Somewhere.js

export default class Somewhere extends React.Component {

  ...

  callSomeRequest() {
    request('DELETE', '/some/request').then(
      () => {
        console.log('Request successful!')
      }
    )
  }

  ...

}

사실, 지금으로서는 공리로는 가능하지 않습니다.다음 범위에 해당하는 상태 코드2xx만, 에 걸릴 수 있습니다..then().

기존의 접근법은, 다음의 에러를 검출하는 것입니다.catch()블록은 다음과 같습니다.

axios.get('/api/xyz/abcd')
  .catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

  });

또 다른 접근법은 요청 또는 응답이 처리되기 전에 대행 수신하거나 캐치하는 것입니다.

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

에러 본문 전체에 액세스 하려면 , 다음과 같이 실시합니다.

 async function login(reqBody) {
  try {
    let res = await Axios({
      method: 'post',
      url: 'https://myApi.com/path/to/endpoint',
      data: reqBody
    });

    let data = res.data;
    return data;
  } catch (error) {
    console.log(error.response); // this is the main part. Use the response property from the error object

    return error.response;
  }

}

다음과 같이 할 수 있습니다.error.response.data
내 경우 백엔드에서 오류 속성을 받았습니다.그래서 error.response.data.error를 사용했습니다.

내 코드:

axios
  .get(`${API_BASE_URL}/students`)
  .then(response => {
     return response.data
  })
  .then(data => {
     console.log(data)
  })
  .catch(error => {
     console.log(error.response.data.error)
  })

비동기 기능을 사용하지 않으려면 대기하십시오.

export const post = async ( link,data ) => {
const option = {
    method: 'post',
    url: `${URL}${link}`,
    validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    data
};

try {
    const response = await axios(option);
} catch (error) {
    const { response } = error;
    const { request, ...errorObject } = response; // take everything but 'request'
    console.log(errorObject);
}

를 사용해 보았습니다.try{}catch{}방법이 통하지 않았습니다.하지만, 사용법을 바꾸자.then(...).catch(...)Axios Error가 올바르게 검출되어 가지고 놀 수 있습니다.브레이크포인트를 넣을 때 AxiosError를 볼 수 없고, 대신 검출된 에러는 정의되어 있지 않다고 표시되며, 이것이 UI에 표시됩니다.

왜 이런 일이 일어나는지 잘 모르겠다. 나는 그것이 매우 하찮다고 생각한다.어느 쪽이든 이 때문에, 저는 기존의 방식을 사용하는 것을 추천합니다..then(...).catch(...)사용자에게 정의되지 않은 오류가 발생하는 것을 방지하기 위해 위에서 설명한 메서드를 사용합니다.

내가 제대로 이해했다면 네가 원하는 것then요청이 성공하고 오류를 무시하려는 경우에만 호출되는 요청 함수입니다.이를 위해 새 약속을 만들려면 Axios 요청이 성공했을 때 해결하고 실패 시 이를 거부하지 않습니다.

업데이트된 코드는 다음과 같습니다.

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }


  return new Promise(function(resolve, reject) {
    axios(config).then(
      function (response) {
        resolve(response.data)
      }
    ).catch(
      function (error) {
        console.log('Show error notification!')
      }
    )
  });

}

재사용 가능:

create errorHandler.js:

export const errorHandler = (error) => {
  const { request, response } = error;
  if (response) {
    const { message } = response.data;
    const status = response.status;
    return {
      message,
      status,
    };
  } else if (request) {
    //request sent but no response received
    return {
      message: "server time out",
      status: 503,
    };
  } else {
    // Something happened in setting up the request that triggered an Error
    return { message: "opps! something went wrong while setting up request" };
  }
};

다음으로, Axi의 에러를 검출할 때마다, 다음과 같이 합니다.

Just import error handler from errorHandler.js and use like this.
  try {
    //your API calls 
  } catch (error) {
    const { message: errorMessage } = errorHandlerForAction(error);
     //grab message
  }

https://stackabuse.com/handling-errors-with-axios/

    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
        console.log(err.request);
    } else {
        // Anything else
    }
}

캐치를 사용하지 않고 어디서든 요청 기능을 호출할 수 있습니다.

첫째, 대부분의 오류를 한 곳에서 처리하는 것은 좋은 아이디어이지만, 요청을 처리하는 것은 쉽지 않습니다.일부 오류(예: "사용자 이름 사용" 또는 "잘못된 이메일" 등 400개의 유효성 검사 오류)는 전달되어야 합니다.

이제 Promise 기반 기능을 사용합니다.

const baseRequest = async (method: string, url: string, data: ?{}) =>
  new Promise<{ data: any }>((resolve, reject) => {
    const requestConfig: any = {
      method,
      data,
      timeout: 10000,
      url,
      headers: {},
    };

    try {
      const response = await axios(requestConfig);
      // Request Succeeded!
      resolve(response);
    } catch (error) {
      // Request Failed!

      if (error.response) {
        // Request made and server responded
        reject(response);
      } else if (error.request) {
        // The request was made but no response was received
        reject(response);
      } else {
        // Something happened in setting up the request that triggered an Error
        reject(response);
      }
    }
  };

그런 다음 다음과 같은 요청을 사용할 수 있습니다.

try {
  response = await baseRequest('GET', 'https://myApi.com/path/to/endpoint')
} catch (error) {
  // either handle errors or don't
}

나에게 효과가 있었던 스트림으로 설정된 응답 유형에 대한 공리 오류를 처리하는 한 가지 방법입니다.

.....
.....
try{
   .....
   .....
   // make request with responseType: 'stream'
   const url = "your url";
   const response = axios.get(url, { responseType: "stream" });
   // If everything OK, pipe to a file or whatever you intended to do
   // with the response stream
   .....
   .....
} catch(err){
  // Verify it's axios error
  if(axios.isAxios(err)){
    let errorString = "";
    const streamError = await new Promise((resolve, reject) => {
      err.response.data
        .on("data", (chunk) => {
           errorString += chunk;
          }
        .on("end", () => {
           resolve(errorString);
         }
      });
    // your stream error is stored at variable streamError.
    // If your string is JSON string, then parse it like this
    const jsonStreamError = JSON.parse(streamError as string);
    console.log({ jsonStreamError })
    // or do what you usually do with your error message
    .....
    .....
  }
  .....
  .....
}
   
  

Promise catch 메서드에서 API 오류를 처리합니다.

let url = ``
 axios.get(url)
.then((response) => {
    // Success
})
.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.log(error.response.data);
        // console.log(error.response.status);
        // console.log(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.log(error.request);
    } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
    }
    console.log(error.config);
});

언급URL : https://stackoverflow.com/questions/49967779/axios-handling-errors