游標：你聽過 GPT-4 驅動的強大程式碼編輯器嗎？

Cursor（https://www.cursor.so/）是 GPT-4 驅動的一款強大程式碼編輯器，可以輔助程式設計師進行日常的編碼。

1679124987(1)
這個例子做的事情是網頁擷取。擷取的目標是百度首頁上的百度熱搜，如下圖所示。

1679125033(1)
我用的是 JavaScript 來實現的。

同時按下 Ctrl + K，給出的提示是：擷取https://www.baidu.com/ 網站上的百度熱搜。

Cursor 很快就給出了下面的一段程式碼。

// 使用 axios 和 cheerio 庫擷取https://www.baidu.com/ 網站上的百度熱搜

const axios = require("axios");
const cheerio = require("cheerio");

async function fetchBaiduHotSearch() {
  try {
    const response = await axios.get("https://www.baidu.com/");
    const $ = cheerio.load(response.data);
    const hotSearchList = [];

    $(".hotsearch-item").each((index, element) => {
      const title = $(element).find(".title-content-title").text().trim();
      hotSearchList.push(title);
    });

    console.log(hotSearchList);
  } catch (error) {
    console.error("Error fetching Baidu Hot Search:", error);
  }
}

fetchBaiduHotSearch();

我的問題是：這段程式碼可以運行嗎？

GPT-4 解釋了這段程式碼的運行原理，還告訴我要用 npm 安裝 axios 和 cheerio 庫。

我的問題是：這段程式碼可以運行嗎？

GPT-4 解釋了這段程式碼的運行原理，還告訴我要用 npm 安裝 axios 和 cheerio 庫。

1679125162(1)
運行了之後，發現輸出結果為空陣列。

把錯誤反饋給 GPT-4，它建議查看網頁結構中的 CSS 選擇器。

1679125190(1)

確認網頁結構沒有問題，反饋給 GPT-4。它進一步建議修改 HTTP 的 User-Agent 頭來繞開百度的反爬蟲處理。

1679125212(1)
按照 GPT-4 給出的程式碼進行修改。運行之後就得到了正確的結果。
下面是最後產生的程式碼：


const axios = require("axios");
const cheerio = require("cheerio");

async function fetchBaiduHotSearch() {
  try {
    const response = await axios.get("https://www.baidu.com/", {
      headers: {
        "User-Agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3",
        Referer: "https://www.baidu.com/",
      },
    });

    const $ = cheerio.load(response.data);
    const hotSearchList = [];

    $(".hotsearch-item").each((index, element) => {
      const title = $(element).find(".title-content-title").text().trim();
      hotSearchList.push(title);
    });

    console.log(hotSearchList);
  } catch (error) {
    console.error("Error fetching Baidu Hot Search:", error);
  }
}

fetchBaiduHotSearch();