About Web Methods
2 min read
Wix allows you to add both backend and frontend code to your site. Backend code is executed on the server, while frontend code is executed in the browser. In order to call backend code from the frontend, you can use a special type of function called a web method. Wix handles all the backend-frontend communication required to enable this access. This article explains how to use web methods.
What are web methods?
Web methods are wrappers used to export backend functions. These wrappers not only define the exported function but also set permissions for it. The permissions are then applied in the frontend whenever the function is called. Web methods can only be defined in files with a
.web.js extension.You can define web methods by importing the
webMethod function and the Permissions enum from the wix-web-module module. You always need to import these when defining a web method. The webMethod function takes 2 arguments: a permission and a function. The permission defines who can call the function from the frontend. The Permissions enum includes the different possible permissions. The function is the backend function that you want to export.Here's an example of defining a backend function using a web method wrapper in a
.web.js file:1import {Permissions, webMethod} from "wix-web-module";
2
3export const multiply = webMethod(Permissions.Anyone, (a,b) => a * b);In this example, the
multiply function is defined using the webMethod wrapper. The Permissions.Anyone argument means that anyone can call this function from the frontend.Understand Permissions
Permissions for web methods are defined when the function is defined in the backend. Once a function is defined with a permission, that permission is applied whenever the function is called from the frontend. There are 3 options for permissions:
Anyone: Any site visitor can call the function from the frontend.SiteMember: Only logged-in site members can call the function from the frontend.Admin: Only site administrators can call the function from the frontend.
Here are examples of how to define functions with each type of permission in a
.web.js file:1import {Permissions, webMethod} from "wix-web-module";
2
3// Anyone can call this function
4export const multiply = webMethod(Permissions.Anyone, (a,b) => a * b);
5
6// Only members can call this function
7export const add = webMethod(Permissions.SiteMember, (a,b) => a + b);
8
9// Only admins can call this function
10export const subtract = webMethod(Permissions.Admin, (a,b) => a - b);In this example, the
multiply function can be called by anyone, the add function can only be called by logged-in site members, and the subtract function can only be called by site administrators.Call backend functions from frontend code
Once you've defined your backend functions using web methods, you can import them into your frontend code files and call them. Note that all imported backend functions are asynchronous.
Here's an example of how to call a backend
multiply function from the frontend:1import {multiply} from 'backend/myModule.web';
2
3$w.onReady(async function () {
4 multiply(5, 3).then((result) => {
5 console.log(result); // Logs 15
6 });
7});In this example, the
multiply function is imported from the backend module and then called in the frontend. The result is logged to the console.Did this help?
|