Axios React获取错误响应并发送到UI

时间:2019-12-09 18:26:37

标签: json reactjs api axios response

我有一个带有应用程序的React应用程序,该服务使用Axios发出api请求。我正在尝试从registerService获取error.response消息(ValidationResult.Errors),并将验证结果消息传递回registerView。我在console.log响应中看到的api响应中处理并提供了错误消息,因此我知道它们将返回。它只是抓住这些并显示在registerView Im中苦苦挣扎。这是我的代码...谢谢。

registerService.js

import RegisterApi from '../api/registerApi';

导出默认类RegisterService {

static postRegister(details) {
    console.log("postSite")
    return RegisterApi.getLoginAuths(details)
    .then(function (response) {
        console.log(response)
        return response
    })
    .catch(function (error) {
        console.log(error.response);
        return error.response
   });
}

}

RegisterApi.js

    import instance from'./index';
//mport axios from 'axios'

export default class RegisterApi {
static apiUrl='/api/identity/account/register/';

static getLoginAuths(details){
return instance.post(`${this.apiUrl}`, details,{
headers: { 'content-type':'application/json' }
        });
    }

}

registerView.js

    handleSubmit = async e => {
        e.preventDefault();

        this.setState({ submitted: true, serverErrors: '' });

        const { firstName, surname, companyName, orisecAccountNumber, email, password, confirmPassword, loading, formErrors } = this.state;

        const details = {
            firstName, surname, companyName, orisecAccountNumber, email, password, confirmPassword, loading, formErrors
        };

               try {
        const response = await RegisterService.postRegister(details)
        console.log(response.data);
        console.log("Registered")
      } catch (error) {
          debugger
        if (error.response && error.response.data) {
          if (error.response.data.ValidationResult) {
            this.setState({
                serverErrors: error.response.data.ValidationResult

            });
            console.log(this.state.serverErrors)
          } else {
          console.log(error);
        }
      }
    }

示例api错误响应

    data:
CompanyName: "a"
ConfirmPassword: "Pass123!"
Email: "*****"
FirstName: "a"
OrisecAccountNumber: "a"
Password: "Pass1213!"
Surname: "aa"
ValidationResult:
Errors: Array(1)
0: {Field: "ConfirmPassword", Message: "The 'Password' and 'Confirm password' do not match."}
length: 1
__proto__: Array(0)
Status: "Failed"
__proto__: Object
__proto__: Object

0 个答案:

没有答案