// 引入一些需要用到的庫以及一些聲明import * as puppeteer from 'puppeteer' // 引入Puppeteerimport mongo from '../lib/mongoDb' // 需要用到的 mongodb庫，用來存取爬取的數據import chalk from 'chalk' // 一個美化 console 輸出的庫const log = console.log // 縮寫 console.logconst TOTAL_PAGE = 50 // 定義需要爬取的網頁數量，對應頁面下部的跳轉鏈接// 定義要爬去的數據結構interface IWriteData {  link: string // 爬取到的商品詳情鏈接 picture: string // 爬取到的圖片鏈接 price: number // 價格，number類型，需要從爬取下來的數據進行轉型 title: string // 爬取到的商品標題}// 格式化的進度輸出 用來顯示當前爬取的進度function formatProgress (current: number): string {  let percent = (current / TOTAL_PAGE) * 100 let done = ~~(current / TOTAL_PAGE * 40) let left = 40 - done let str = `當前進度：[${''.padStart(done, '=')}${''.padStart(left, '-')}]  ${percent}%` return str}

// 因為我們需要用到大量的 await 語句，因此在外層包裹一個 async functionasync function main() { // Do something}main()

// 進入代碼的主邏輯async function main() { // 首先通過Puppeteer啟動一個瀏覽器環境 const browser = await puppeteer.launch() log(chalk.green('服務正常啟動')) // 使用 try catch 捕獲異步中的錯誤進行統一的錯誤處理 try {  // 打開一個新的頁面  const page = await browser.newPage()  // 監聽頁面內部的console消息  page.on('console', msg => {   if (typeof msg === 'object') {    console.dir(msg)   } else {    log(chalk.blue(msg))   }  })  // 打開我們剛剛看見的淘寶頁面  await page.goto('https://s.taobao.com/search?q=gtx1080&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20180416&ie=utf8')  log(chalk.yellow('頁面初次加載完畢'))  // 使用一個 for await 循環，不能一個時間打開多個網絡請求，這樣容易因為內存過大而掛掉  for (let i = 1; i <= TOTAL_PAGE; i++) {   // 找到分頁的輸入框以及跳轉按鈕   const pageInput = await page.$(`.J_Input[type='number']`)   const submit = await page.$('.J_Submit')   // 模擬輸入要跳轉的頁數   await pageInput.type('' + i)   // 模擬點擊跳轉   await submit.click()   // 等待頁面加載完畢，這里設置的是固定的時間間隔，之前使用過page.waitForNavigation()，但是因為等待的時間過久導致報錯（Puppeteer默認的請求超時是30s,可以修改）,因為這個頁面總有一些不需要的資源要加載，而我的網絡最近日了狗，會導致超時，因此我設定等待2.5s就夠了   await page.waitFor(2500)   // 清除當前的控制臺信息   console.clear()   // 打印當前的爬取進度   log(chalk.yellow(formatProgress(i)))   log(chalk.yellow('頁面數據加載完畢'))   // 處理數據，這個函數的實現在下面   await handleData()   // 一個頁面爬取完畢以后稍微歇歇，不然太快淘寶會把你當成機器人彈出驗證碼（雖然我們本來就是機器人）   await page.waitFor(2500)  }  // 所有的數據爬取完畢后關閉瀏覽器  await browser.close()  log(chalk.green('服務正常結束'))  // 這是一個在內部聲明的函數，之所以在內部聲明而不是外部，是因為在內部可以獲取相關的上下文信息，如果在外部聲明我還要傳入 page 這個對象  async function handleData() {   // 現在我們進入瀏覽器內部搞些事情，通過page.evaluate方法，該方法的參數是一個函數，這個函數將會在頁面內部運行，這個函數的返回的數據將會以Promise的形式返回到外部    const list = await page.evaluate(() => {        // 先聲明一個用于存儲爬取數據的數組    const writeDataList: IWriteData[] = []    // 獲取到所有的商品元素    let itemList = document.querySelectorAll('.item.J_MouserOnverReq')    // 遍歷每一個元素，整理需要爬取的數據    for (let item of itemList) {     // 首先聲明一個爬取的數據結構     let writeData: IWriteData = {      picture: undefined,      link: undefined,      title: undefined,      price: undefined     }     // 找到商品圖片的地址     let img = item.querySelector('img')     writeData.picture = img.src     // 找到商品的鏈接     let link: HTMLAnchorElement = item.querySelector('.pic-link.J_ClickStat.J_ItemPicA')     writeData.link = link.href     // 找到商品的價格，默認是string類型 通過~~轉換為整數number類型     let price = item.querySelector('strong')     writeData.price = ~~price.innerText          // 找到商品的標題，淘寶的商品標題有高亮效果，里面有很多的span標簽，不過一樣可以通過innerText獲取文本信息     let title: HTMLAnchorElement = item.querySelector('.title>a')      writeData.title = title.innerText     // 將這個標簽頁的數據push進剛才聲明的結果數組     writeDataList.push(writeData)    }    // 當前頁面所有的返回給外部環境    return writeDataList       })   // 得到數據以后寫入到mongodb   const result = await mongo.insertMany('GTX1080', list)   log(chalk.yellow('寫入數據庫完畢'))  } } catch (error) {  // 出現任何錯誤，打印錯誤消息并且關閉瀏覽器  console.log(error)  log(chalk.red('服務意外終止'))  await browser.close() } finally {  // 最后要退出進程  process.exit(0) }}