Axios 处理错误

IT技术 javascript promise axios
2021-01-30 04:44:01

我正在尝试使用 Axios 更好地理解 javascript Promise。我假装是处理 Request.js 中的所有错误,并且只从任何地方调用请求函数而不必使用catch().

在此示例中,对请求的响应将为 400,并带有 JSON 格式的错误消息。

这是我得到的错误:

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

我找到的唯一解决方案是添加.catch(() => {})Somewhere.js,但我试图避免这样做。是否可以?

这是代码:

请求.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)
    }
  )
}

某处.js

export default class Somewhere extends React.Component {

  ...

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

  ...

}
6个回答

实际上,目前使用 axios 是不可能的。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);
    }

  });

另一种方法是在它们被 then 或 catch 处理之前拦截请求或响应。

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);
  });
为什么你只需要使用简单的回报您的then零件和Promise.reject你的catch部分?对我来说似乎不太一致。
2021-03-20 04:44:01
无论如何,我认为您指的是该interceptor部分,但没有then请求或响应在被处理之前被拦截,因此,我们还不想Promise.resolve()但是,如果遇到错误,我们可以Promise.reject()根据需要。或者,我们可以返回一些东西,稍后在处理请求或响应时,我们可以使用Promise.reject(). 一样。
2021-03-21 04:44:01
我使用了axiosgithub 上官方文档中的片段github.com/axios/axios#interceptors
2021-04-02 04:44:01
谢啦!。我不知道错误键也有error.request
2021-04-08 04:44:01
啊,是的,有道理!因此,在错误情况下,我们已经知道,不需要进一步处理请求,因此Promise可能已经被拒绝。
2021-04-10 04:44:01

如果您想访问整个错误正文,请按如下所示操作:

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

}
这真的解决了我的问题,谢谢 elonaire
2021-03-22 04:44:01

你可以这样: error.response.data
在我的例子中,我从后端得到了error属性。所以,我使用了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);
}
我已经看到 error.response 未定义,然后它将在解构中失败
2021-04-05 04:44:01

我尝试使用该try{}catch{}方法,但它对我不起作用。然而,当我切换到 using 时.then(...).catch(...),AxiosError 被正确捕获,我可以使用它。当我在放置断点时尝试前者时,它不允许我看到 AxiosError,而是告诉我捕获的错误是未定义的,这也是最终在 UI 中显示的内容。

不知道为什么会发生这种情况,我觉得这很微不足道。无论哪种方式,我建议使用.then(...).catch(...)上面提到的传统方法来避免向用户抛出未定义的错误。

今天我也发生了同样的事情:/
2021-03-23 04:44:01
try..catch仅适用于async/await. 您可以使用.catch()(捕获被拒绝的Promise)或try { await axios... } catch (err) {...}(捕获因被拒绝的Promise而导致的异常来处理它
2021-04-12 04:44:01