我希望能够检索请求的响应并将其存储在属性中,但是我无法在onreafystatchange函数中访问属性customerArray。
export default {
name: "CustomerList",
data() {
return {
customerArray: []
}
},
methods: {
retrieveAllCustomer: function () {
var xhr = new XMLHttpRequest();
var url = "https://url";
xhr.open("GET", url, false);
xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
//Does not refer to customerArray
this.customerArray = JSON.parse(this.responseText);
} else {
console.log(this.status, this.statusText);
}
}
};
xhr.send();
}
}
}
是否可以在onreadystatechange中指向customerArray?
答案 0 :(得分:3)
xhr.onreadystatechange = function ()
导致this
引用更改为XMLHttpRequest对象。因此,this.customerArray
不再存在。为了避免这种情况,请创建对原始this
的新引用:
retrieveAllCustomer: function () {
var comp = this;
var xhr = new XMLHttpRequest();
var url = "https://url";
xhr.open("GET", url, false);
xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
comp.customerArray = JSON.parse(this.responseText);
} else {
console.log(this.status, this.statusText);
}
}
};
xhr.send();
}
答案 1 :(得分:0)
您的问题是函数内的应有范围,因为在onreadystatechange之后它与以前不一样。
使用() => { }
代替function () { }
:
...
xhr.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE) {
...
Here,您可以阅读有关此内容的很好的解释。