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

您的问题不是关于reactjs或axios，它只是纯JavaScript。使用此=> location.href

Answer 2

U可以使用：location.window.href

通常我使用react-router重定向

history.js

import createHistory from 'history/createBrowserHistory';
export default createHistory()

Root.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

another_file.js

import history from './history' 

history.push('/test') // this should change the url and re-render Test component

参考：https://github.com/ReactTraining/react-router/issues/3498

Answer 3

我建议您不要在操作内部执行辅助操作（在这种情况下为axios调用）。这是因为您最终会将这些调用添加到redux thunk / saga或某些其他中间件中。

我遵循的模式是您返回promise，并在组件（或容器）内添加重定向逻辑。以下是它的好处：-

这使您的代码更整洁，并避免了API调用内部的副作用。
使用模拟数据可以更轻松地测试您的api调用。
在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);
}

如何在axios中重定向？

3 个答案: