为什么用cheerio运行这段代码没有output？

Question

I am trying to get all the gif links from https://giphy.com/search/test and put them into an array using request and cheerio. When I run my code nothing happens. Does anyone know what I am doing wrong?

const request = require('request');
const cheerio = require('cheerio');

urls = [

];

    request("https://giphy.com/search/test", function(err, resp, body){
    if(!err && resp.statusCode == 200){
        var $ = cheerio.load(body);
        $("a.giphy-gif css-d0ovzf", "#GridWithTV-sc-1hnvpyn eLOeIu").each(function(){
            var url = this.attr('href');
            urls.push(url)
            console.log(urls)
        })

    }
});

Answer 1

Converting an excellent comment to an answer, the data you get from an HTTP request is just the plain HTML. This website is a single page app which is mostly JS-driven. The selectors are built after the page loads and the browser executes JavaScript.

However, most of the data that goes onto the page is available in a JSON blob in the static HTML and can be extracted with a regex:

const cheerio = require("cheerio");
require("util").inspect.defaultOptions.depth = null;

const url = "<Your URL>";

fetch(url)
  .then(res => {
    if (!res.ok) {
      throw Error(res.statusText);
    }

    return res.text();
  })
  .then(html => {
    const match = html.match(/^ *gifs: (.*),$/m);
    console.log(JSON.parse(match[1]));
  })
  .catch(err => console.error(err));

From here, it's a matter of grabbing the data you want, for example:

const data = JSON.parse(match[1])
  .map(({title, url}) => ({title, url}));
console.log(data);