尧图网站建设 
在 ToolJet 中使用 Axios 发起 HTTP 请求RunJS 查询实战指南【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet在 ToolJet 中RunJSRun JavaScript查询让你可以在应用内直接执行自定义 JavaScript 代码而Axios正是其中内置的三大 JavaScript 库之一另外两个是 Moment.js 和 Lodash。本指南聚焦如何借助 Axios 这个基于 Promise 的 HTTP 客户端在 RunJS 查询中向自有或外部服务器发起GET、POST、PUT/PATCH、DELETE等请求并处理响应数据。读完本文你将能够在 ToolJet 应用中零后端代码地完成 API 调用、数据获取与结果绑定并把请求结果展示到页面组件上。前置条件RunJS 查询中可用的内置库ToolJet 的 RunJS 查询环境默认内置了三个 JavaScript 库可在代码中直接使用无需任何引入或安装库名说明官方文档Moment.js日期时间处理https://momentjs.com/docs/Lodash实用工具函数集合https://lodash.com/docs/AxiosPromise 风格的 HTTP 客户端https://axios-http.com/docs/intro从源码层面看这三个库是作为参数直接注入 RunJS 执行环境的。在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中预置 JS 的执行函数以[moment, _, axios]作为函数形参、以真实的moment、lodash_与axios实例作为实参构造异步执行函数同样的保留字列表也出现在 frontend/src/AppBuilder/_helpers/libraryConstants.js 的RESERVED_PARAMS中moment、_、axios均在列。这意味着在 RunJS 代码中直接书写axios.get(...)即可生效同时这些名字不可被自定义参数或变量覆盖。如果你需要引入这三大库之外的第三方库可以参考 如何在 RunJS 中导入外部库。创建 RunJS 查询的基本流程在动手写 Axios 代码之前先确认 RunJS 查询的创建路径与 Run JavaScript Code 数据源指南 中描述的一致在应用编辑器中点击底部查询管理器的 Add按钮。从可用数据源列表中选择Run JavaScript Code在服务端数据源体系中它对应runjs这个静态数据源类型见 server/src/modules/data-sources/constants/index.ts 中定义的DefaultDataSourceKinds。在 JavaScript 编辑器中粘贴 Axios 代码。点击Preview按钮预览输出或点击Run按钮真正触发查询。RunJS 查询的编辑器由 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx 提供它使用langjavascript的多行代码编辑器承载你的脚本。查询执行后脚本中return的值会成为该查询的输出可在应用中通过{{queries.查询名.data}}引用。GET 请求从外部 API 拉取数据GET 请求常用于从服务器读取数据。下面以JSONPlaceholder一个免费公开的模拟 REST API为例演示如何获取指定用户的信息。在 RunJS 查询中粘贴以下代码var url https://jsonplaceholder.typicode.com/users/1; var data (await axios.get(url)).data; return data代码说明url变量保存目标接口地址axios.get(url)发起 GET 请求由于 Axios 是 Promise 风格的客户端这里用await等待请求完成Axios 的响应对象中服务端返回的业务数据位于.data属性响应对象的其它属性如status、statusText、headers等依然可用最后return data把响应体作为查询结果返回供组件绑定展示。点击Preview即可在查询面板中看到 JSONPlaceholder 返回的id、name、email、address等用户字段。POST 请求向服务器提交数据POST 请求用于向服务器创建资源。继续使用 JSONPlaceholder 的/users接口演示如何提交一条新用户记录。var url https://jsonplaceholder.typicode.com/users; var data axios.post(url,{ id: 11, name: Shubhendra, username: camelcaseguy, email: shubhendratooljet.com,}) return data代码说明axios.post(url, {...})的第二个参数是要发送的请求体对象这里提交了id、name、username、email四个字段与 GET 示例不同此处没有对axios.post(...)使用await。如果你需要在后续代码中立即使用响应数据建议加上await并读取(await axios.post(url, body)).data将整个 Axios 响应对象return出去此时查询输出会包含status、data等字段。JSONPlaceholder 对成功的资源创建会返回Status: 201Created同时响应体.data中会包含新创建的资源对象——这是判断 POST 是否成功的典型标志。更多请求方法PUT/PATCH 与 DELETEAxios 支持的所有 HTTP 方法在 RunJS 中均可使用与上面两个示例的调用模式一致方法用途调用示例GET读取资源axios.get(url, config)POST创建资源axios.post(url, data, config)PUT整体更新资源axios.put(url, data, config)PATCH部分更新资源axios.patch(url, data, config)DELETE删除资源axios.delete(url, config)例如更新用户信息可以这样写var url https://jsonplaceholder.typicode.com/users/1; var data (await axios.patch(url, { name: ToolJet User, email: usertooljet.com, })).data; return data错误处理方面建议对网络失败或非 2xx 响应做兜底。可以在 RunJS 中用try/catch包裹 Axios 调用并返回可读的错误信息再结合 如何让 JS 查询有意失败 中的做法让查询在出错时以可控方式失败方便在事件处理器中捕获并提示用户。在应用中串联 Axios 查询进阶用法RunJS 查询的返回值可以成为组件数据的来源也可以驱动其它查询这在用 Axios 构建真实应用时非常实用。将 GET 结果绑定到组件在画布上放置一个Text或Table组件在其数据/文本属性中填入类似{{queries.runjs1.data}}的表达式——runjs1是包含axios.get(...)代码的 RunJS 查询名称查询运行后返回的数组/对象会渲染到组件中。查询间串联在 RunJS 中还可以通过queries.查询名.run(参数)调用其它查询并结合parameters变量把动态值传入 Axios 调用。例如var url https://jsonplaceholder.typicode.com/users/ parameters.userId; var data (await axios.get(url)).data; return data此时为查询添加名为userId的参数运行查询时传入不同值即可复用同一段代码请求不同用户的数据。更完整的参数用法含queries.multiply.run({...})的调用链示例参见 Run JavaScript Code 数据源指南。常见问题与排查建议axios is not defined确认查询的数据源确实是Run JavaScript Code而非其它类型并且没有自定义参数或变量覆盖了axios这个保留名见 frontend/src/AppBuilder/_helpers/libraryConstants.js。响应数据取不到Axios 响应对象中业务数据在.data属性上直接return axios.get(url)返回的是整个响应对象请使用(await axios.get(url)).data。接口跨域或无法访问确认目标服务允许来自 ToolJet 部署域的跨域请求外部公开 API 一般无此限制自有服务需配置 CORS。想在组件里看到结果检查组件属性中的表达式是否写成{{queries.查询名.data}}并确认查询已成功运行状态为绿色成功标志。需要定时执行可结合 按指定时间间隔触发查询 让 Axios 查询周期性刷新数据。小结在 ToolJet 的 RunJS 查询中Axios 是发起 HTTP 请求的最直接手段GET用(await axios.get(url)).data拿数据POST/PUT/PATCH/DELETE通过第二个参数传请求体并检查status确认结果。结合parameters变量、组件绑定{{queries.查询名.data}}以及查询串联你可以仅凭低代码环境完成从拉取外部 API到展示/加工数据的完整链路无需编写任何后端服务。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 ToolJet 中使用 Axios 发起 HTTP 请求：RunJS 查询实战指南
在 ToolJet 中使用 Axios 发起 HTTP 请求RunJS 查询实战指南【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet在 ToolJet 中RunJSRun JavaScript查询让你可以在应用内直接执行自定义 JavaScript 代码而Axios正是其中内置的三大 JavaScript 库之一另外两个是 Moment.js 和 Lodash。本指南聚焦如何借助 Axios 这个基于 Promise 的 HTTP 客户端在 RunJS 查询中向自有或外部服务器发起GET、POST、PUT/PATCH、DELETE等请求并处理响应数据。读完本文你将能够在 ToolJet 应用中零后端代码地完成 API 调用、数据获取与结果绑定并把请求结果展示到页面组件上。前置条件RunJS 查询中可用的内置库ToolJet 的 RunJS 查询环境默认内置了三个 JavaScript 库可在代码中直接使用无需任何引入或安装库名说明官方文档Moment.js日期时间处理https://momentjs.com/docs/Lodash实用工具函数集合https://lodash.com/docs/AxiosPromise 风格的 HTTP 客户端https://axios-http.com/docs/intro从源码层面看这三个库是作为参数直接注入 RunJS 执行环境的。在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中预置 JS 的执行函数以[moment, _, axios]作为函数形参、以真实的moment、lodash_与axios实例作为实参构造异步执行函数同样的保留字列表也出现在 frontend/src/AppBuilder/_helpers/libraryConstants.js 的RESERVED_PARAMS中moment、_、axios均在列。这意味着在 RunJS 代码中直接书写axios.get(...)即可生效同时这些名字不可被自定义参数或变量覆盖。如果你需要引入这三大库之外的第三方库可以参考 如何在 RunJS 中导入外部库。创建 RunJS 查询的基本流程在动手写 Axios 代码之前先确认 RunJS 查询的创建路径与 Run JavaScript Code 数据源指南 中描述的一致在应用编辑器中点击底部查询管理器的 Add按钮。从可用数据源列表中选择Run JavaScript Code在服务端数据源体系中它对应runjs这个静态数据源类型见 server/src/modules/data-sources/constants/index.ts 中定义的DefaultDataSourceKinds。在 JavaScript 编辑器中粘贴 Axios 代码。点击Preview按钮预览输出或点击Run按钮真正触发查询。RunJS 查询的编辑器由 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx 提供它使用langjavascript的多行代码编辑器承载你的脚本。查询执行后脚本中return的值会成为该查询的输出可在应用中通过{{queries.查询名.data}}引用。GET 请求从外部 API 拉取数据GET 请求常用于从服务器读取数据。下面以JSONPlaceholder一个免费公开的模拟 REST API为例演示如何获取指定用户的信息。在 RunJS 查询中粘贴以下代码var url https://jsonplaceholder.typicode.com/users/1; var data (await axios.get(url)).data; return data代码说明url变量保存目标接口地址axios.get(url)发起 GET 请求由于 Axios 是 Promise 风格的客户端这里用await等待请求完成Axios 的响应对象中服务端返回的业务数据位于.data属性响应对象的其它属性如status、statusText、headers等依然可用最后return data把响应体作为查询结果返回供组件绑定展示。点击Preview即可在查询面板中看到 JSONPlaceholder 返回的id、name、email、address等用户字段。POST 请求向服务器提交数据POST 请求用于向服务器创建资源。继续使用 JSONPlaceholder 的/users接口演示如何提交一条新用户记录。var url https://jsonplaceholder.typicode.com/users; var data axios.post(url,{ id: 11, name: Shubhendra, username: camelcaseguy, email: shubhendratooljet.com,}) return data代码说明axios.post(url, {...})的第二个参数是要发送的请求体对象这里提交了id、name、username、email四个字段与 GET 示例不同此处没有对axios.post(...)使用await。如果你需要在后续代码中立即使用响应数据建议加上await并读取(await axios.post(url, body)).data将整个 Axios 响应对象return出去此时查询输出会包含status、data等字段。JSONPlaceholder 对成功的资源创建会返回Status: 201Created同时响应体.data中会包含新创建的资源对象——这是判断 POST 是否成功的典型标志。更多请求方法PUT/PATCH 与 DELETEAxios 支持的所有 HTTP 方法在 RunJS 中均可使用与上面两个示例的调用模式一致方法用途调用示例GET读取资源axios.get(url, config)POST创建资源axios.post(url, data, config)PUT整体更新资源axios.put(url, data, config)PATCH部分更新资源axios.patch(url, data, config)DELETE删除资源axios.delete(url, config)例如更新用户信息可以这样写var url https://jsonplaceholder.typicode.com/users/1; var data (await axios.patch(url, { name: ToolJet User, email: usertooljet.com, })).data; return data错误处理方面建议对网络失败或非 2xx 响应做兜底。可以在 RunJS 中用try/catch包裹 Axios 调用并返回可读的错误信息再结合 如何让 JS 查询有意失败 中的做法让查询在出错时以可控方式失败方便在事件处理器中捕获并提示用户。在应用中串联 Axios 查询进阶用法RunJS 查询的返回值可以成为组件数据的来源也可以驱动其它查询这在用 Axios 构建真实应用时非常实用。将 GET 结果绑定到组件在画布上放置一个Text或Table组件在其数据/文本属性中填入类似{{queries.runjs1.data}}的表达式——runjs1是包含axios.get(...)代码的 RunJS 查询名称查询运行后返回的数组/对象会渲染到组件中。查询间串联在 RunJS 中还可以通过queries.查询名.run(参数)调用其它查询并结合parameters变量把动态值传入 Axios 调用。例如var url https://jsonplaceholder.typicode.com/users/ parameters.userId; var data (await axios.get(url)).data; return data此时为查询添加名为userId的参数运行查询时传入不同值即可复用同一段代码请求不同用户的数据。更完整的参数用法含queries.multiply.run({...})的调用链示例参见 Run JavaScript Code 数据源指南。常见问题与排查建议axios is not defined确认查询的数据源确实是Run JavaScript Code而非其它类型并且没有自定义参数或变量覆盖了axios这个保留名见 frontend/src/AppBuilder/_helpers/libraryConstants.js。响应数据取不到Axios 响应对象中业务数据在.data属性上直接return axios.get(url)返回的是整个响应对象请使用(await axios.get(url)).data。接口跨域或无法访问确认目标服务允许来自 ToolJet 部署域的跨域请求外部公开 API 一般无此限制自有服务需配置 CORS。想在组件里看到结果检查组件属性中的表达式是否写成{{queries.查询名.data}}并确认查询已成功运行状态为绿色成功标志。需要定时执行可结合 按指定时间间隔触发查询 让 Axios 查询周期性刷新数据。小结在 ToolJet 的 RunJS 查询中Axios 是发起 HTTP 请求的最直接手段GET用(await axios.get(url)).data拿数据POST/PUT/PATCH/DELETE通过第二个参数传请求体并检查status确认结果。结合parameters变量、组件绑定{{queries.查询名.data}}以及查询串联你可以仅凭低代码环境完成从拉取外部 API到展示/加工数据的完整链路无需编写任何后端服务。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考