I'm using es6 javascript with babel and trying to make an ajax call using xhr using two function but getting an error Uncaught TypeError: this.post is not a function
What is the correct syntax to make a call to a function from another function defined in the same class in es6 javascript?
Thanks for your answer this is my code
import alt from '../../alt';
import cookie from 'react-cookie';
class LoginActions {
constructor(){
this.generateActions(
'updatePassword',
'updateName',
'loginSuccess',
'loginFail',
'remember'
);
}
// Generic get request
post(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
callback(null, xhr.responseText);
} else {
callback(xhr.statusText);
}
}
};
xhr.send(data);
}
// Get actual content
login(name, password, remember) {
var data = "name="+name+"&password="+password+"&remember="+remember;
this.post('api/login', data, function(err, data) {
if (!err) {
this.actions.loginSuccess(data.message);
} else {
this.actions.loginFail(JSON.parse(data.message));
}
}).bind(this);
}
}
export default alt.createActions(LoginActions);
Edit1: This is how I call login function / also passed data to xhr request above
handleSubmit(event){
event.preventDefault();
var name = this.state.name;
var password = this.state.password;
var remember = this.state.remember;
LoginActions.login(name, password, remember);
}
Your methods login()
and post()
are instance methods, not static methods. So you have to create an instance of your LoginActions
object with new
in order to properly call those methods on that object.
Or if you don't actually need an instance with instance data, then make all the methods static and refer to them as LoginActions.post()
and LoginActions.login()
, not using this
.
Instead, you're trying to mix and match. You're calling LoginActions.login()
which is a static type call and then inside of login()
, you're trying to reference this
which assumes an instance.
Give these things a try:
var loginAction = new LoginActions();
loginAction.login(name, password, remember);
this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }).bind(this);
Here, you seem to be trying to bindthis
to the callback. But actually you are bindingthis
to the return value of post method. To bindthis
to the callback,this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }.bind(this));
Notice function(){}.bind instead of the post(function(){}).bind
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.