前言:

? ? ? ? 這兩天在使用puppeteer編寫腳本的時候,報了一個錯,Evaluation failed: ReferenceError: __awaiter is not defined,花了大概1天多時間把這個問題給解決了.

前因:

? ? ? ? 我在項目中編寫了一段ts的代碼:

async function scrollPageCustom(page: any, elementSelect?: any) {return await page.evaluate((elementSelect: any) => {return new Promise(async (resolve, reject) => {const height = document.querySelector(elementSelect).scrollHeight;const delay = (ms: number) =>new Promise((resolve) => setTimeout(resolve, ms));console.log(height);for (let i = 0; i < height - 600; i += 200) {await delay(200);document.querySelector(elementSelect).scroll(0, i);// window.scroll(0, i);}resolve("success");});}, elementSelect || "html"); }

? ? ? ? 這段代碼是自動滾動打開的頁面,我需要把這個代碼編譯成js后,再重新在瀏覽器中跑,當我使用ts的代碼的時候,這段代碼是可以正常運行的,但是等我使用命令tsc 編譯命令后,卻報錯了. 編譯過程出了什么問題?

查看編譯后的代碼:

"use strict"; var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }step((generator = generator.apply(thisArg, _arguments || [])).next());}); }; var __generator = (this && this.__generator) || function (thisArg, body) {var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;function verb(n) { return function (v) { return step([n, v]); }; }function step(op) {if (f) throw new TypeError("Generator is already executing.");while (_) try {if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;if (y = 0, t) op = [op[0] & 2, t.value];switch (op[0]) {case 0: case 1: t = op; break;case 4: _.label++; return { value: op[1], done: false };case 5: _.label++; y = op[1]; op = [0]; continue;case 7: op = _.ops.pop(); _.trys.pop(); continue;default:if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }if (t[2]) _.ops.pop();_.trys.pop(); continue;}op = body.call(thisArg, _);} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };} }; exports.__esModule = true; var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); }; function scrollPageCustom(page, elementSelect) {return __awaiter(this, void 0, void 0, function () {var _this = this;return __generator(this, function (_a) {switch (_a.label) {case 0: return [4 /*yield*/, page.evaluate(function (elementSelect) {return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {var height, delay, i;return __generator(this, function (_a) {switch (_a.label) {case 0:height = document.querySelector(elementSelect).scrollHeight;delay = function (ms) {return new Promise(function (resolve) { return setTimeout(resolve, ms); });};console.log(height);i = 0;_a.label = 1;case 1:if (!(i < height - 600)) return [3 /*break*/, 4];return [4 /*yield*/, delay(200)];case 2:_a.sent();document.querySelector(elementSelect).scroll(0, i);_a.label = 3;case 3:i += 200;return [3 /*break*/, 1];case 4:resolve("success");return [2 /*return*/];}});}); });}, elementSelect || "html")];case 1: return [2 /*return*/, _a.sent()];}});}); }

從代碼中可以看到確實聲明了__awaiter,那為什么還是報了?is not defined這個錯誤呢?

問題原因:

? ? ? ? 因為puppeteer在運行頁面的時候,并不會把__awaiter代入,在page執行滾動操作的時候,其實是形成了一個閉包,無法讀取到外部的變量,所以如果你要在page中使用到這個__awaiter,則需要另外傳參,把__awaiter以參數的形式傳入.?

解決:

? ? ? ? 為什么會出這個問題找到了,那么解決問題的方式就簡單了,因為我的這個文件編譯是單獨的,所以這個函數我可以單獨傳入. 另外一種方式就是在page中執行的時候不要有到async,await即可

總結:

? ? ? ? 雖然是一個小問題,但是還是饒了我很多路,剛開始我以為是編譯的問題,以為瀏覽器不支持es6的語法,所以在編譯的時候加了參數,結果也還是會報錯. 還是那個聲明的__awaiter誤導了我啊!

總結

以上是生活随笔為你收集整理的puppeteer开发中Evaluation failed: ReferenceError: __awaiter is not defined 报错处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。