将 fetch 操作转换为 axios 操作答案

【问题标题】：Convert fetch actions to axios actions将 fetch 操作转换为 axios 操作
【发布时间】：2019-06-25 22:15:44
【问题描述】：

我正在尝试将我的操作从 fetch 更新到 axios。

例如，我当前的登录如下所示：

export const login = (email, password) => {
  return (dispatch) => {
    dispatch({
      type: 'CLEAR_MESSAGES'
    });
    return fetch('/login', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: email,
        password: password
      })
    }).then((response) => {
      if (response.ok) {
        return response.json().then((json) => {
          dispatch({
            type: 'LOGIN_SUCCESS',
            token: json.token,
            user: json.user
          });
          cookie.save('token', json.token, { expires: moment().add(1, 'hour').toDate() });
          browserHistory.push('/account');
        });
      } else {
        return response.json().then((json) => {
          dispatch({
            type: 'LOGIN_FAILURE',
            messages: Array.isArray(json) ? json : [json]
          });
        });
      }
    });
  };
}

到目前为止，对于转换为 axios，我有这个：

export const login = (email, password) => {
    // const { email, password } = this.props;

    (dispatch) => {
    dispatch({
        type: 'CLEAR_MESSAGES'
    })
    axios({
        method: 'post',
        url: '/login',
        data: { email: email, password: password }
    }).then((response) => {
        dispatch({
        type: 'LOGIN_SUCCESS',
        token: json.token,
        user: json.user
        });
        cookie.save('token', json.token, { expires: moment().add(1, 'hour').toDate() });
        browserHistory.push('/account');
    })
    .catch(() => dispatch({
        type: 'LOGIN_FAILURE',
        messages: Array.isArray(json) ? json : [json]
        })
    )
}}

它不起作用:(而且我不确定我做错了什么 - 对 axios 不太熟悉。

我在 Google Chrome 控制台中收到此错误

【问题讨论】：

json 应该指的是什么？

标签： reactjs axios fetch

【解决方案1】：

我认为错误是因为您调用了更新后的代码中不存在的 json 变量。

【讨论】：

【解决方案2】：

您需要通过 response.data 访问数据。使用fetch() 时，使用response.json() 转换响应并使用thenable 来利用json 是有意义的，但使用axios，您可以立即获得响应而无需任何转换。

export const login = (email, password) => {
    return (dispatch) => {
        dispatch({
           type: 'CLEAR_MESSAGES'
        })

axios.post("/login", {email, password}).then((response) => {
    dispatch({
       type: 'LOGIN_SUCCESS',
       token: response.data.token,
       user: response.data.user
    });
    cookie.save('token', json.token, { expires: moment().add(1, 'hour').toDate() });
    browserHistory.push('/account');
})
.catch(() => dispatch({
    type: 'LOGIN_FAILURE',
    messages: Array.isArray(json) ? json : [json]
    })
)

【讨论】：