likes
comments
collection
share

爬取数据渲染：Promise+ XMLHttpRequest—>fetch

作者站长头像
站长
· 阅读数 31

实现电影数据的爬取，然后将通过列表将数据渲染出来

定义一个getData函数，用于爬取数据，通过XMLHttpRequest的方法来爬取电影数据；

  • 定义一个形参url，用于接收给定的接口地址；
  • 该函数返回一个Promise对象；
  • 在创建的Promise对象中，创建一个XMLHttpRequest对象xhr；
  • 配置请求，指定请求的类型为GET，请求的目标URL为传入接收的的url参数，第三个参数true表示这是一个异步请求；
  • 发送请求到服务器；
  • 判断检查请求是否完成（readyState为4）并且服务器响应状态码为200（表示成功）；
  • 如果条件满足，说明成功的获取到数据，将服务器返回的文本解析成JavaScript对象，然后从中提取movieList属性赋值给变量moiveList；
  • 调用resolve函数，将解析后的电影列表数据miveList作为Promise的成功结果传递出去(异步操作成功完成，任何在该Promise上调用.then方法的回调将会接收到这个数据moiveList)。

代码：

 function getData(url) {
            return new Promise( function(resolve, reject) {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.send();
                xhr.onreadystatechange = function() {
                    if(xhr.readyState === 4 && xhr.status === 200) {
                        let movieList = JSON.parse(xhr.responseText).movieList;
                        resolve(movieList);
                    }
                }
            })
          
        }

定义一个函数renderLi用于将获取的数据通过无序列表进行渲染在页面上：

  • 定义一个形参arr，用于接收爬取到的电影数据movieList；
  • 通过forEach遍历该数组；
  • 创建li标签；
  • 将li的innerText设置为遍历到的数组中的元素的nm属性的值(电影名)；
  • 将li加到ul里面去，从而实现在页面上的渲染。

代码：

 function renderLi(arr) {
            // 创建li
            arr.forEach(item => {
                let li = document.createElement('li');
                li.innerText = item.nm;
                document.getElementById('ul').appendChild(li);
            })
        }

总的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">请求数据</button>
    <ul id="ul"></ul>

    <script>
        function getData(url) {
            return new Promise( function(resolve, reject) {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.send();
                xhr.onreadystatechange = function() {
                    if(xhr.readyState === 4 && xhr.status === 200) {
                        let movieList = JSON.parse(xhr.responseText).movieList;
                        resolve(movieList);
                    }
                }
            })
          
        }

        function renderLi(arr) {
            // 创建li
            arr.forEach(item => {
                let li = document.createElement('li');
                li.innerText = item.nm;
                document.getElementById('ul').appendChild(li);
            })
        }

        document.getElementById('btn').addEventListener('click', function() {
            getData('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList').then( res => {
                renderLi(res);
            })
        })

       
    </script>
</body>
</html>

爬取数据渲染：Promise+ XMLHttpRequest—>fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">请求数据</button>
    <ul id="ul"></ul>

    <script>
        function renderLi(arr) {
            // 创建li
            arr.forEach(item => {
                let li = document.createElement('li');
                li.innerText = item.nm;
                document.getElementById('ul').appendChild(li);
            })
        }

        document.getElementById('btn').addEventListener('click', function() {
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then(res => {
                return res.json();
            })
            .then(data => {
                renderLi(data.movieList);
            })
        })

       
    </script>
</body>
</html>
转载自:https://juejin.cn/post/7374808297184854070
评论
请登录