我的同步 function 在哪里？ 嘗試調用“等待”，但我收到錯誤“等待僅在異步 function 中有效。”

Question

嘗試編寫一個使用 puppeteer 登錄網站的腳本，並模擬一個設備列表，因為它們從 go 到每個 url。 但是，當我嘗試運行腳本時出現錯誤： SyntaxError: await is only valid in async function 。 我對異步函數不是很熟悉，所以我試圖讓每個 function 異步，我找不到我的同步 function。 如果是當我 map 通過每個 url 時，我該如何使這個同步？

//import devices from './puppeteerDevices'
const puppeteer = require('puppeteer');
const { devices } = puppeteer;



testedMobileDevices = ["Galaxy Note 3","Galaxy Note 3 landscape","Galaxy Note II","Galaxy Note II landscape","Galaxy S III","Galaxy S III landscape","Galaxy S5","Galaxy S5 landscape","iPad","iPad landscape","iPad Mini","iPad Mini landscape","iPad Pro","iPad Pro landscape","iPhone 4","iPhone 4 landscape","iPhone 5","iPhone 5 landscape","iPhone 6","iPhone 6 landscape","iPhone 6 Plus","iPhone 6 Plus landscape","iPhone 7","iPhone 7 landscape","iPhone 7 Plus","iPhone 7 Plus landscape","iPhone 8","iPhone 8 landscape","iPhone 8 Plus","iPhone 8 Plus landscape","iPhone SE","iPhone SE landscape","iPhone X","iPhone X landscape","iPhone XR","iPhone XR landscape","iPhone 11","iPhone 11 landscape","iPhone 11 Pro","iPhone 11 Pro landscape","iPhone 11 Pro Max","iPhone 11 Pro Max landscape","Nexus 10","Nexus 10 landscape","Nexus 4","Nexus 4 landscape","Nexus 5","Nexus 5 landscape","Nexus 5X","Nexus 5X landscape","Nexus 6","Nexus 6 landscape","Nexus 6P","Nexus 6P landscape","Nexus 7","Nexus 7 landscape","Pixel 2","Pixel 2 landscape","Pixel 2 XL","Pixel 2 XL landscape"];

const login = async () => {
    const browser = await puppeteer.launch( {headless: true });
    const page = await browser.newPage();
    const username = 'andrewbregman'
    const password = 'randompassword120948acndkla'  
    const base_url = 'http://127.0.0.1:8000/'

  await page.goto({base_url}/login);
  await page.type ('[name=username]', username);
  await page.type('[name=password]', password);
  await page.click('[type=submit]');
  await page.waitFor(5000);
  
}

const test = async () => {
    testedMobileDevices.map(device => {
    login();
    const base_url = 'http://127.0.0.1:8000/'
    const urls = ['myprojects', 'home', 'notifications']
    const browser = await puppeteer.launch()
    const page = await browser.newPage()

    await page.emulate(device)

    urls.forEach(goUrls); 
    const goUrls = async (url) =>{
        await page.goto({base_url}/url)
        page.screenshot({
            path: "./screenshot.jpg",
            type: "jpeg",
            fullPage: true})
        await page.waitFor(100);
    }
    })
}

test();

Answer 1

您需要將 function 傳遞給testedMobileDevices.map async ：

const test = async () => {
testedMobileDevices.map(async(device) => {
login();
const base_url = 'http://127.0.0.1:8000/'
const urls = ['myprojects', 'home', 'notifications']
const browser = await puppeteer.launch()
const page = await browser.newPage()

await page.emulate(device)

urls.forEach(goUrls); 
const goUrls = async (url) =>{
    await page.goto({base_url}/url)
    page.screenshot({
        path: "./screenshot.jpg",
        type: "jpeg",
        fullPage: true})
    await page.waitFor(100);
}
})}

Answer 2

看來您應該一次對這些進行排序，否則您可能會擁有大量無頭 chrome 瀏覽器，它們都在並行競爭本地資源。 因此，總而言之，您需要進行以下更改：

1. 依次對操作進行排序，以避免並行資源過多。
2. 正確地與調用者溝通完成或錯誤。
3. 正確聲明了您的字符串模板。
4. 將await與所有返回承諾的操作一起使用。
5. 刪除.forEach()的所有使用，因為它不是承諾感知和.map() ，因為您真的不想並行運行所有 100 個左右。 將其替換為常規for循環，該循環繼承父級的async聲明並且具有承諾意識並且易於排序。
6. 當您調用它時，記錄完成並捕獲並記錄任何錯誤。
7. 按照編碼，這將在第一個錯誤時中止。 您可以修改代碼以捕獲任何錯誤、記錄它、清除該錯誤並在下一次迭代中繼續循環。 在繼續之前，您需要在幾個地方try/catch並在catch塊中使用正確的代碼進行清理。

僅供參考，這是您環境中的代碼，因此這代表了您應該瞄准的結構 - 您可能需要修復其他編碼錯誤（因為我已經注意到模板字符串聲明的編碼錯誤 - 可能還有其他錯誤）。

這是一種完成所有這些的方法：

//import devices from './puppeteerDevices'
const puppeteer = require('puppeteer');
const { devices } = puppeteer;

const testedMobileDevices = ["Galaxy Note 3", "Galaxy Note 3 landscape", "Galaxy Note II", "Galaxy Note II landscape",
    "Galaxy S III", "Galaxy S III landscape", "Galaxy S5", "Galaxy S5 landscape", "iPad", "iPad landscape",
    "iPad Mini", "iPad Mini landscape", "iPad Pro", "iPad Pro landscape", "iPhone 4", "iPhone 4 landscape",
    "iPhone 5", "iPhone 5 landscape", "iPhone 6", "iPhone 6 landscape", "iPhone 6 Plus", "iPhone 6 Plus landscape",
    "iPhone 7", "iPhone 7 landscape", "iPhone 7 Plus", "iPhone 7 Plus landscape", "iPhone 8", "iPhone 8 landscape",
    "iPhone 8 Plus", "iPhone 8 Plus landscape", "iPhone SE", "iPhone SE landscape", "iPhone X",
    "iPhone X landscape", "iPhone XR", "iPhone XR landscape", "iPhone 11", "iPhone 11 landscape", "iPhone 11 Pro",
    "iPhone 11 Pro landscape", "iPhone 11 Pro Max", "iPhone 11 Pro Max landscape", "Nexus 10", "Nexus 10 landscape",
    "Nexus 4", "Nexus 4 landscape", "Nexus 5", "Nexus 5 landscape", "Nexus 5X", "Nexus 5X landscape", "Nexus 6",
    "Nexus 6 landscape", "Nexus 6P", "Nexus 6P landscape", "Nexus 7", "Nexus 7 landscape", "Pixel 2",
    "Pixel 2 landscape", "Pixel 2 XL", "Pixel 2 XL landscape"
];

async function login() {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    const username = 'andrewbregman';
    const password = 'randompassword120948acndkla';
    const base_url = 'http://127.0.0.1:8000/';

    await page.goto(`${base_url}/login`);
    await page.type('[name=username]', username);
    await page.type('[name=password]', password);
    await page.click('[type=submit]');
    await page.waitFor(5000);
}

async function test() {
    for (let device of testedMobileDevices) {
        await login();
        const base_url = 'http://127.0.0.1:8000/'
        const urls = ['myprojects', 'home', 'notifications']
        const browser = await puppeteer.launch()
        const page = await browser.newPage()

        await page.emulate(device);

        for (let url or urls) {
            await page.goto(`${ base_url }/url`);
            await page.screenshot({
                path: "./screenshot.jpg",
                type: "jpeg",
                fullPage: true
            });
            await page.waitFor(100);
        }
    }
}

test().then(() => {
    console.log("all done");
}).catch(err => {
    console.log(err);
});