关于
的实施
我正在构建Web应用程序的身份验证，当我将登录数据发送到服务器时，我会陷入困境，但是我无法做到异步，因为我创建的功能不会返回Promise。P>
所以我要完成的是填写表单时，请按按钮，然后执行函数onSubmit((，该函数验证了输入的数据，则如果一切正常，则可以执行Excectute outhersed function cumbt((。然后函数cump((执行api.user.login(数据(功能，其中数据被发送到服务器并接收有关用户注册状态的信息。如果登录状态成功，则用户将被重定向到用户页面，但是当称为api.user.login((时，我会卡住。
我会出现错误，就像我提交表单数据时可以看到波纹管一样。但是，服务器仍然收到表格数据。
TypeError: Cannot read property 'then' of undefined
LoginPage._this.submit
src/components/pages/LoginPage.js:17
14 | }
15 |
16 | submit = data => {
> 17 | api.user.login(data)
18 | .then(res => {
19 | if (res.data === "loginSucces") {
20 | <Redirect to="/user"/>
View compiled
LoginForm._this.onSubmit
src/components/pages/forms/LoginForm.js:26
23 |
24 | //is empty method or ES6 Object.keys(errs) takes all the keys
25 | if (Object.keys(errors).length === 0) {
> 26 | this.props.submit(this.state.data)
27 | // console.log("hello");
28 | // this.props.submit()
29 | }
我试图做的是将登录功能包装在新的Promise((中，但这绝对不起作用。
return new Promise((resolve, rejec) => {
let data = JSON.stringify(credentials);
axios.post("/register", data
).then(function(res) {
console.log(res);
return res.data
}).catch(function(error) {
console.log(error);
});
})
所以我的登录页面是波纹管：
import React from 'react';
import LoginForm from './forms/LoginForm';
import PropTypes from "prop-types"
import api from "../../api.js"
import { Route, Redirect } from 'react-router'
class LoginPage extends React.Component
{
constructor(){
super();
this.state = {
};
}
submit = data => {
api.user.login(data).then(res => {
if (res === "loginSucces") {
<Redirect to="/user"/>
}
}).cache(err=>{
console.error(err);
})
}
render() {
return (
<div>
<h1>Login page</h1>
<LoginForm submit={this.submit}/>
</div>
);
}
}
export default LoginPage;
登录表单代码：
import React from 'react';
import PropTypes from "prop-types";
import {Button, Form, FormGroup, Label, Input, FormFeedback} from 'reactstrap';
class LoginForm extends React.Component{
constructor(){
super();
this.state = {
data:{},
loading: false,
errors: {}
};
}
onChange = e =>
this.setState({
data: {...this.state.data, [e.target.name]: e.target.value}})
onSubmit = e => {
e.preventDefault();
const errors = this.validate(this.state.data);
this.setState({ errors: errors })
//is empty method or ES6 Object.keys(errs) takes all the keys
if (Object.keys(errors).length === 0) {
this.props.submit(this.state.data)
// console.log("hello");
// this.props.submit()
}
}
validate = (data) => {
const errors = {};
//TODO cant be special sibols, to short etc
if(!data.username) {
errors.username = "Can't be bank";
}
if(!data.password){
errors.password = "Can't be bank";
}
return errors;
}
render() {
return(
//TODO form still reloads
<Form onSubmit={this.onSubmit}>
<FormGroup>
<Label for="username">Username</Label>
<Input
invalid={!!this.state.errors.username}
name="username"
id="username"
placeholder="What is your username?"
value = {this.state.data.username}
onChange = {this.onChange}
/>
<FormFeedback invalid >{this.state.errors.username}</FormFeedback>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input invalid={!!this.state.errors.password}
type="password"
name="password"
id="password"
placeholder="Make it secure"
value = {this.state.data.password}
onChange = {this.onChange}
/>
<FormFeedback invalid >{this.state.errors.password}</FormFeedback>
</FormGroup>
<Button preventDefault>Submit</Button>
</Form>
)
}
}
LoginForm.propTypes = {
submit: PropTypes.func.isRequired
};
export default LoginForm;
API代码：
import axios from "axios"
export default {
user: {
login: credentials =>{
let data = JSON.stringify(credentials);
axios.post("/register", data
).then(function(res) {
console.log(res);
return res.data
}).catch(function(error) {
console.log(error);
});
},
test: () => {console.log("test in api")}
}
}
这是Console.log(res(输出：
{
data: "loginSucces",
status: 200,
statusText: "OK",
headers: {
…
},
config: {
…
},
…
}config: adapter: ƒxhrAdapter(config)arguments: (...)caller: (...)length: 1name: "xhrAdapter"prototype: {
constructor: ƒ
}__proto__: ƒ()[
[
FunctionLocation
]
]: xhr.js: 11[
[
Scopes
]
]: Scopes[
2
]data: "{"username":"sdfsdfdfsdfsdfsdgsdfgsdgsadgsdgsdag","password":"sdfsdfsdfsdf345235235"}"headers: Accept: "application/json, text/plain, */*"Content-Type: "application/x-www-form-urlencoded"__proto__: ObjectmaxContentLength: -1method: "post"timeout: 0transformRequest: {
0: ƒ
}transformResponse: {
0: ƒ
}url: "/register"validateStatus: ƒvalidateStatus(status)xsrfCookieName: "XSRF-TOKEN"xsrfHeaderName: "X-XSRF-TOKEN"__proto__: Objectdata: "loginSucces"headers: connection: "close"content-length: "11"content-type: "text/html; charset=utf-8"date: "Fri, 30 Mar 2018 20:03:56 GMT"etag: "W/"b-JeyKc7pdZbjTvd8ActAidnhWojA""vary: "Accept-Encoding"x-powered-by: "Express"__proto__: Objectrequest: XMLHttpRequestonabort: nullonerror: ƒhandleError()onload: nullonloadend: nullonloadstart: nullonprogress: nullonreadystatechange: ƒhandleLoad()ontimeout: ƒhandleTimeout()readyState: 4response: "loginSucces"responseText: "loginSucces"responseType: ""responseURL: "http://localhost:3000/register"responseXML: nullstatus: 200statusText: "OK"timeout: 0upload: XMLHttpRequestUploadonabort: nullonerror: nullonload: nullonloadend: nullonloadstart: nullonprogress: nullontimeout: null__proto__: XMLHttpRequestUploadwithCredentials: false__proto__: XMLHttpRequeststatus: 200statusText: "OK"__proto__: constructor: ƒObject()hasOwnProperty: ƒhasOwnProperty()isPrototypeOf: ƒisPrototypeOf()propertyIsEnumerable: ƒpropertyIsEnumerable()toLocaleString: ƒtoLocaleString()toString: ƒtoString()valueOf: ƒvalueOf()__defineGetter__: ƒ__defineGetter__()__defineSetter__: ƒ__defineSetter__()__lookupGetter__: ƒ__lookupGetter__()__lookupSetter__: ƒ__lookupSetter__()get__proto__: ƒ__proto__()set__proto__: ƒ__proto__()
您需要知道
axios是浏览器和node.js
- 从浏览器制作xmlhttprequests
- 从node.js 制作http请求
- 支持承诺API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- JSON数据的自动变换
- 客户侧支持XSRF
Axios不会回报承诺。
关于post
的实施执行邮政请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
您的实施方式如下：
login: credentials =>{
let data = JSON.stringify(credentials);
axios.post("/register", data
).then(function(res) {
console.log(res);
return res.data
}).catch(function(error) {
console.log(error);
});
},
似乎输出是data属性的内容。
参考：
https://github.com/axios/axios