Question

当我尝试检查响应状态的条件时，它甚至没有进入内部并检查是否应该进行比较和显示警报的操作。 FYI swal是用于警报的npm软件包

onSubmit(values) {
    this.props.signIn(values, response => {
        if (response.status === 200) {
            swal("Login successful", "Signed In", "success");
            this.props.history.push(`/dashboard/${response.data.user_name}`);
        } else {
            console.log("wrong password");
            swal({
                title: "Invalid Email Id or password",
                icon: "warning"
            });
        }
    });
};

Action.js

export function signIn(values, callback) {
    const request = axios.post(`${ROOT_URL}/${APP_ID}/${API_KEY}/users/login`, values).then(() => callback());

    return {
        type: LOGIN_DETAILS,
        payload: request
    };
}

Answer 1

需要返回axios promise，请尝试使用该代码

    onSubmit(values) {
    this.props
      .signIn(values)
      .then((response) => {
        swal("Login successful", "Signed In", "success");
          this.props.history.push(`/dashboard/${response.data.user_name}`);
      })
      .catch((error) => {
        console.log("ajax error");
        swal({
          title: "Invalid Email Id or password",
          icon: "warning",
        });
      });
  }

Answer 2

第一个错误是response.status，将未定义，因为您没有在callback()中传回响应

第二个原因是，如果 axios.post 失败，它将永远不会调用 callback（），这意味着如果其他方法不起作用，则整个系统将失效。

要解决此问题，您只需将操作更改为此

export function signIn(values, callback) {
    const request = axios.post(`${ROOT_URL}/${APP_ID}/${API_KEY}/users/login`, values).then(callback).catch(callback);

    return {
        type: LOGIN_DETAILS,
        payload: request
    };
}

或

export function signIn(values, callback) {
    const request = axios.post(`${ROOT_URL}/${APP_ID}/${API_KEY}/users/login`, values).then((response) => callback(response)).catch((error) => callback(error));

    return {
        type: LOGIN_DETAILS,
        payload: request
    };
}

如果条件在错误响应中不起作用

2 个答案: