编写 JS 对象

在低代码中的 JavaScript 编辑器允许您创建一个可重用的 JavaScript 函数，你可以在组件内调用这些函数，从而实现对应的功能。在低代码项目中，处处皆可JS。

如何创建JS对象

JS 对象是由多个函数和变量组成的实体。它是一个可以在其他 JS 对象中引用的可重用组件，允许您创建一组有组织的层次结构。

您可以从左侧菜单栏的【查询/JS】中新增JS对象

如何调用JS对象

你可以在PagePlug任何的输入框中，来调用JS对象中定义的函数，例如：

1、可以修改js对象的名称

2、代码编辑选项，可以在里面编写JS代码

3、支持设置异步函数

4、可以定义变量

5、可以定义函数

6、这里可以支持多种内容，举几个例子：

• 编写代码
• 调用内置或用户定义的函数
• API调用
• 数据库执行查询

7、向JS对象添加多个函数

8、可以选择要执行的函数名称

9、点击执行

TIP

定义的 JS 对象可跨 API、查询或为特定页面定义的其他 JS 对象使用，并且具有页面级访问权限，不能跨页面访问。

调用JS函数

例如我们刚刚在上面创建了一个JSObject1对象，我们可以在任意组件中调用JSObject1对象中定义的函数，例如在按钮组件里面：

组件的属性框都支持编写JS

使用Synchronous或Asynchronous的JS对象编写函数

Synchronous

例如，下面的代码片段显示了一个数据过滤器：

Api.data.filter(() => {}); // filtering data

这里的数据过滤是选择您要选择用于查看或分析的数据子集的过程。要过滤数据，您必须一个接一个地遍历整个数据集，如果符合过滤条件，则将其隔离。因此，您需要同步执行

Asynchronous

例如使用Promises，Api.run()，Query.Run()（例如。showModal）。它基本上可以让您延迟执行嵌入在异步函数中的代码，并在需要时执行。

您可以为异步功能配置其他设置并增强用户体验。// 待做

JS代码编辑器介绍

JavaScript 编辑器是一个功能广泛的编辑器，可在编写代码时提供额外的功能，你可以用它做很多事情。

1、返回结果选项

在开发时执行每个功能，都可以在返回结果选项中查看输出

2、编码错误检查

JavaScript 编辑器会自动检查您的源代码是否存在编程错误。如果代码在编程上不正确，它会在错误代码下方使用红色波浪线突出显示错误。例如，return被拼错为 ret 的语法错误也会被 linting 捕获。

3、错误选项

错误选项卡显示代码执行产生的所有类型的错误。这些错误可能包括语法错误、运行时错误（如解析错误）等。

4、日志选项

日志选项显示能看到执行的时间情况，你也可以通过单击控制台右下角的调试图标来打开“日志”选项（如下面的屏幕截图所示）。在日志选项中，使您可以通过在过滤器框中输入关键字或从下拉列表中选择日志类型来灵活地过滤日志。

示例

可以添加以下代码片段

export default {
   hello: () => {
      return “Hello World”;
   }
}

请注意

您可以点击右上角的运行可用来执行JS 函数。如果你的 JS 对象只定义了一个函数，编辑器会默认函数名。但如果您的 JS 对象定义了多个函数，您可以选择要执行的函数，然后单击运行。

debugger和console功能

你可以使用debugger或console.log()调试您的代码并分别在浏览器控制台中检查它，这样可以检查代码的情况，并逐行检查它以帮助识别和修复任何错误

控制台对象仅支持log、error和warn方法。您还可以使用信息和调试方法。但是，这些方法提供与日志方法相同的功能。

console.log()用法

你可以使用console.log()将有关代码的信息打印到浏览器的控制台，帮你查看代码执行的不同点检查变量值或应用程序的状态。

console.log(<VARIABLE_NAME>)

当你运行你的代码时，<VARIABLE_NAME> 的值将打印到浏览器的控制台，查看它是否符合您的预期

示例

• 首先创建一个get_users的api

https://mock-api.appsmith.com/users

• 创建一个js对象，打印接口数据

把下列代码输入到代码器中

export default {
    getUser: async () => {
			const res = await get_users.run();
			console.log(res);
    }
}

之后点击右上角运行，之后就看到打印的接口的返回数据

• 延伸，我们再试下打印一个变量值

export default {
    getUser: async () => {
        const {users} = await get_users.run();
        console.log(users);
        users[0].id = 5;
        console.log(users[0]);	
    }
}

debugger功能

我们可以在代码中要暂停的地方插入一个debugger，然后运行你的应用程序。当到达调试器语句时，代码的执行将暂停，它的工作方式类似于breakpoint. 然后，您可以使用调试器工具单步执行代码、检查变量并查看代码的执行情况。

编写 REST API

可新增 rest Api 来进行数据的请求

使用介绍

1. 该请求的名称，可自行更改

2. 请求方式，可选 Get、post、put、delete、patch

3. 请求地址，需检查是否可用

4. 请求头和参数，以key-value 的形式添加，请求体和设置请看下图

请求体可以以多种形式携带

设置

可以设置执行时机，是否页面加载完立即发送请求，以及 API 的超时时间

5. 点击运行，可在这里看到返回结果

6. 发送请求时携带的请求头可在这里看到

7. 请求失败时，在这里可以看到错误信息

API 调用

不支持 async await 的调用方式，请使用回调方式调用API

// Using Callbacks
{{
    MockApi.run(() => {
      // 成功回调
      // MockApi.data 为请求成功的数据
    },() => {
      // 失败回调
    }) 
}}

操作数组介绍

介绍常用的数组方法，下面提供一些简单的案例介绍

使用 Lodash

工具库中默认装载了 Lodash。Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。下面给出一些使用 Lodash 库的方法操作数组的示例，若您想要了解更多操作，请参阅 Lodash 文档。// 待做

方法	介绍	示例
_.head(array)	返回数组的第一个元素
_.last(array)	返回数组最后一个元素
_.nth(array, n)	获取第 n 个元素，n 可以为负数(例如取第三个)
_.chunk(array, size)	将数组拆分成多个长度为 size 的小数组，小数组构成新数组
_.uniq(array)	去重数组
_.initial(array)	删除数组最后一个元素
_.pull(array, [values])	移除数组 array中所有和[values] 相等的元素
_.tail(array)	删除数组第一个元素

常用的数组操作方法

方法	介绍
.length	返回数组的长度
.join	将数组中的元素组合成字符串，分隔符可以自定义(通常为空格)
.indexOf	返回数组中指定值第一次出现的索引
.map	返回一个新数组，其中包含对原始数组的每个元素运行指定函数的结果
.filter	返回一个新数组，其中包含原始数组中匹配指定条件的元素
.includes	如果数组包含传递给方法的值，则返回true或false
.reduce	通过为数组的每个值（从左到右）运行函数，将数组缩减为单个数值
.concat	合并 2 个或多个数组

异步 Javascript

本文档会给你解释如何编写异步 Javascript 代码。

JavaScript promises

JavaScript Promises有助于实现使用回调时难以管理的异步工作流。PagePlug为 JavaScript 提供原生支持，Promises让异步操作更容易，且PagePlug的框架函数，如showAlert()、showModal()、storeValue()和其他函数都返回一个Promises，使异步工作流的实现更容易和可读。

Callbacks vs promises

要了解Callbacks和 promise 实现之间的区别，请考虑一个依次执行三个 API 查询并在所有 API 成功运行完成时显示一条消息的示例，例如：

// Using Callbacks
{{
    MockApi.run(() => {
        MockApi1.run(() => {
            MockApi2.run(() => {
                showAlert('done') 
                })
        })   
    }) 
}}

对同一个示例使用promise可以让实现更易于管理和可读。

{{
    MockApi.run()
        .then(() => MockApi1.run())
        .then(() => MockApi2.run())
        .then(() => showAlert('done'))
 }}

Promise方法

JavaScript Promise有几个内置方法。

tips

传递函数给.then()or的时候.catch()一定要记得把它作为回调函数传递，如下图：

错误方法

{{
 (function() {
   MockApi.run().then(showAlert(`Success`))      
  })()
}}

正确方法

{{
  (function() {
     return MockApi.run().then(() => showAlert(`Success`))
   })()
}}

方法一：Promise.any()

Promise.any()将可迭代的Promise作为输入并返回单个Promise。当其中一个Promise首次履行时，它会返回一个Promise，该Promise解决了已履行Promise的价值。如果你只想完成一个action/Promise以进一步执行，你可以使用Promise.any()方法。

{{
      (function(){
          
        return Promise.any([
              MockApi.run({ name: 1 }), // if name:1 finished early
              MockApi.run({ name: 2 })
        ]).then((res) => {
          showAlert(`Winner: ${res.args.name}`) // Alert Message showns as "Winner: 1" 
        });
      })()
}}

在这个例子中：

• 该函数调用多个 API 查询传递和参数到每个 API 调用。Promise.any()收到退回的Promise。

• 当任何 API 调用首先完成并返回已履行的Promise时，将显示一条警报消息。该消息包含发送到 API 的参数，API 完成执行并在 API 调用中首先返回Promise。

方法二：Promise.race()

它等待第一个已确定的Promise、fulfilled或rejected，以获得结果。Promise.race()当您只需要一个action/promise来完成执行时，您可以使用。

{{
        (function(){
            return  Promise.race([
                    MockApi.run({ name: 1 }),
                    MockApi.run({ name: 2 })
            ]).then((res) => {
                showAlert(`Winner: ${res.args.name}`)
            });
        })()
}}

在示例中：

• 该函数调用多个 API 查询传递和参数到每个 API 调用。

• 返回的 Promise 传递给Promise.race()

• 当任何 API 调用首先完成并返回已履行的Promise时，将显示一条警报消息。该消息包含发送到 API 的参数，该参数在 API 调用中首先完成并返回Promise。

方法三：Promise.all

它接受一组Promise（从技术上讲是任何可迭代的，但通常是一个数组）并返回一个新的Promise。Promise 的结果数组成为新 Promise 的结果。如果其中一个 promise 失败（拒绝状态），新的 Promise 会立即拒绝并返回相同的错误。您可以Promise.all()在希望所有操作成功完成执行时使用。

{{
    (function(){
        let employeeNames = ["Employee 1","Employee 2"];
        // Start a bunch of calls running in parallel and store returned promise
        const calls = employeeNames.map(employeeName => MockApi.run({ name: employeeName }));
        
        // Wait for all to finish (or any to reject).
        return Promise.all(calls)
                .then(() => showAlert('Promise.all - All successful'))
                .catch(() => showAlert('Promise.all - Something went wrong'))
                .finally(() => showAlert('Promise.all - finished'))
    })()
}}

在示例中：

• 该函数使用作为参数传递的员工姓名运行 API。

• 该calls数组存储每个 API 调用的返回Promise。

• 根据中的成功或失败案例显示一条警告消息Promise.all()。

方法四：Promise.allSettled()

它等待所有 promise 解决，不管结果如何（resolved 或 rejected）。Promise.allSettled()当您希望所有操作首先完成时，您可以使用。

{{
  (function(){
    let employeeNames = ["Employee 1","Employee 2"];
    // Start a bunch of calls running in parallel and store returned promise
    const calls = employeeNames.map(employeeName => MockApi.run({ name: employeeName }));
    
    // Wait for all to resolve / reject.
    return Promise.allSettled(calls)
          .then(() => showAlert('Promise.allSettled - All successful'))
          .catch(() => showAlert('Promise.allSettled - Something went wrong'))
          .finally(() => showAlert('Promise.allSettled - finished'))
  })()
}}

在示例中：

• 该函数使用作为参数传递的员工姓名运行 API。

• 该calls数组存储每个 API 调用的返回Promise。

• 根据中的成功或失败案例显示一条警告消息Promise.allSettled()。

通用指南

• 项目中大多数操作触发器都会返回Promise，因此您可以在继续之前附加一个.then()或await等待操作。

• 所有触发器都包含在Promise中，因此任何遗漏的错误都会导致未捕获的Promise错误。

• 附有返回promise.then()，如下所示：

{{
  (function() {
        // the .then only runs if a promise is returned
        return MockApi.run()
            .then(() => showAlert('success'))
    })()
}}

• 参数不再在.then()的参数中传递action.run()。只传递response，如下:

将下端代码放到 {{}} 中使用

(function() {
    const params = { name: "PagePlug" }
    return MockApi.run(params).then((response) => {
            showAlert(`${response.length} users found in `${params.name}`)
        })
})()