在javascript类中

时间:2019-04-22 03:04:35

标签: javascript ajax class methods constructor

我想采用OOP方法向API提出ajax请求。我想创建方法来模块化我的代码。一种方法发出请求,一种方法构建名称的DOM列表。问题是,当我在另一个方法中调用我的方法时,它给我一个错误

  

未捕获的TypeError:this.createListItems不是一个函数   在XMLHttpRequest.xml.onreadystatechange(script.js:35)

我已经通过嵌套请求以检索数据的方式解决了该问题,但是现在在使用方法中的方法或仅从getListofArtists()返回JSON数据以尝试在另一个方法中用作参数时遇到了问题。

class Ajax{



    constructor(url){
        this.xml = new XMLHttpRequest();
        this.url = url;
        this.arr = [];
    }
    createListItems(array){
        for(let artist of array){
            console.log(artist.links[0].href )
            let li = document.createElement('li');
            li.innerHTML = artist.name;
            ul.appendChild(li);
            document.body.appendChild(ul);


        };
    }

    getListofArtists(){
        this.xml.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200){
                let data = JSON.parse(this.responseText);
                //console.log(data.body.list);

//                this.createListItems(data.body.list);
                let ul = document.createElement('ul');

                this.createListItems(data.body.list)
//                for(let artist of data.body.list){
//                    console.log(artist.links[0].href )
//                    let li = document.createElement('li');
//                    li.innerHTML = artist.name;
//                    ul.appendChild(li);
//                    document.body.appendChild(ul);
//                   
//                    
//                };

            }
        }
        this.xml.open('GET', this.url, true);
        this.xml.send();

    }
}


let request = new Ajax('http://www.philart.net/api/artists.json');

let artistData = request.getListofArtists();

0 个答案:

没有答案