reactjs - 如何在 axios 中重定向？

Question

我可以在 .then 而不是 console.log 中重定向吗？

axios
  .post('/api/users/login', user)
  .then(res => console.log(res.data))
  .catch(err => this.setState({ errors: err.response.data }))

这可能吗？如果可能，我该怎么做？

Answer 1

我建议您不要在操作中执行辅助操作(在本例中为 axios 调用)。这是因为您最终会将这些调用添加到 redux thunk/saga 或其他一些中间件中。

我遵循的模式是您返回 promise 并在您的组件(或容器)中添加重定向逻辑。以下是它的好处:-

1. 它使您的代码更清晰，并避免了 API 调用中的副作用。
2. 使用模拟数据可以更轻松地测试您的 API 调用。
3. 如果 API 未将回调作为函数参数传递而失败，则显示警报。

现在，话虽如此，您可以通过以下方式使用上述逻辑:-

// Component code

import { browserHistory } from 'react-router';

class TestContainer extends React.Component {
  auth = () => {
    login()
    .then(() => {
      browserHistory.push("/addUser");
    })
    .catch(() => {
      // Show alert to user;
    })
  }
  
  render () {
    return (
      <div>
        <button onClick={this.auth}>Auth</button>
      </div>
    );
  }
}

// Action code 

const login = () => {
  return axios
  .post('/api/users/login', user);
}