Wix平台Promise返回订单数据访问报错问题及解决方法

问题背景 #

我对Promise的概念以及如何访问其返回的数据一直存在困惑，当前需求是在Wix站点的感谢页获取订单信息，再将该数据发送到Facebook。从下述代码可以看到部分console.log可以正常执行，部分则报错：

import wixLocation from 'wix-location';
import {postToFacebook} from 'backend/facebookModule.jsw';
import {hashData} from 'public/pages/masterPage.js';
import {getUserIP} from 'public/pages/masterPage.js';

$w.onReady(async function () {

    $w('#thankYouPage1').getOrder()
        .then((order) => {
            const orderObj = order;
            console.log('this works! '+ orderObj.number)
        })
        .catch((error) => {
            console.log(error);
        });


    console.log('this DOES NOT work '+ orderObj.number)


    const data = {
        "data": [
            {
                "event_name": "Purchase",
                "event_time": Math.floor(Date.now() / 1000),
                "action_source": "website",
                "event_source_url": wixLocation.url,
                "user_data": {
                    "em": (await hashData(orderObj.BillingInfo.email)),
                    "client_ip_address": (await getUserIP()),
                    "client_user_agent": navigator.userAgent
                },
                "custom_data": {
                    "currency": orderObj.currency,
                     "value": orderObj.totals.total
                }
            }
        ]
    };

    console.log(orderObj.totals.total);

    //console.log(await postToFacebook(data));
    await postToFacebook(data);


});

报错信息 #

报错出现在第二个console.log语句位置：

workerLogger.js:103 ReferenceError: orderObj is not defined

原因说明 #

两个核心原因导致报错：

• 作用域问题：orderObj是在.then()的回调函数内部用const声明的，仅在回调函数的块级作用域内有效，外部代码无法访问
• 异步执行顺序问题：getOrder()是异步方法，.then()的回调会等待接口返回结果后才执行，而第二个console.log是同步代码，执行时异步请求还未完成，就算orderObj声明在外部此时也未完成赋值

解决方案 #

核心是使用await关键字将异步调用转为同步等待的写法，既规避了回调作用域问题，也保证了代码执行顺序符合预期：

import wixLocation from 'wix-location';
import {postToFacebook} from 'backend/facebookModule.jsw';
import {hashData} from 'public/pages/masterPage.js';
import {getUserIP} from 'public/pages/masterPage.js';

$w.onReady(async function () {
    try {
        var orderObj = await $w('#thankYouPage1').getOrder();
    } catch (error) {
        console.log(error);
    }

    const data = {
        "data": [
            {
                "event_name": "Purchase",
                "event_time": Math.floor(Date.now() / 1000),
                "action_source": "website",
                "event_source_url": wixLocation.url,
                "user_data": {
                    "em": (await hashData(await orderObj.billingInfo.email)),
                    "client_ip_address": (await getUserIP()),
                    "client_user_agent": navigator.userAgent
                },
                "custom_data": {
                    "currency": await orderObj.currency,
                     "value": await orderObj.totals.total
                }
            }
        ]
    };

    //console.log(orderObj.totals.total);

    //console.log(await postToFacebook(data));
    await postToFacebook(data);


});

内容的提问来源于stack exchange，提问作者James Wilson