如何捕获Axios拦截器中的错误以显示警报

Question

我正在我的应用程序中实现一个HTTP拦截器。如果有错误，我将如何捕获错误。我在console.log中看到一个响应，但其中没有错误。我仅在“网络”标签中看到错误。请在下面查看我的代码：

UPDATE

没有令牌，因为我认为状态不是初始化大声笑。那我应该在哪里放置拦截器？

 import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import theme from './theme';
import axios from 'axios';

// Redux
import { useSelector } from 'react-redux';
import Routes from './Routes';

function App() {
  const authTokens = useSelector((state) => state.auth.access_token);

  axios.interceptors.request.use(
    function (config) {
      console.log(token);
      const token = `Bearer ${authTokens}`;
      config.headers.Authorization = token;
      console.log(config);
      return config;
    },
    (error) => {
      console.log(error);
      alert('error');
      Promise.reject(error);
    }
  );

  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  );
}

export default App;

Answer 1

我可以建议一些伪代码。您必须根据需要进行更改。

写一个util方法，扩展Vue Error

export class ErrorWrapper extends Error {
  constructor (error, message) {
    super()
    this.statusText = error.response ? error.response.statusText : ''
  }
}

然后写服务类似

return new Promise((resolve, reject) => {
  axios.post(`some_api`, { some_data })
    .then(response => {
      // response
    }).catch(error => {
      reject(new ErrorWrapper(error))
    })
})

然后

AuthService.makeLogin({ some_data })
   .then((response) => {

   })
   .catch((error) => {
      // catch actual error
   })