Portal webspi safeajax error

[MikePower]

Hi experts,

Hope you all are doing great,

I am new to the power pages Webapi, I have a tiny requirement in which I retrieve few entities data into the Power Pages site.

I have integrated the react in the power pages site by creating web files.

Below is the code to get the members table data.

The wrapper ajax is present in the site and also included on the targeted web page.

However, we can’t get the Webapi object in the react project or outside of the power pages site, hence used //@ts-ingore

Once we use the below code into the Power Page after building the react project we can use the Webapi object.

//@ts-ignore

        webapi.safeAjax({

            type: "GET",

            url: "/_api/ii_members",

            contentType: "application/json",

            success: function (result: any, status: any, xhr: any) {

                setTeamList(result.value);

                console.log("Team Members fetched")

            },

            error: function (xhr: any, textStatus: any, errorThrown: any) {

                console.log('Error in Operation');

            }

        });

This doesn’t work smooth for all the time.

When it doesn’t work it returns below error on the console.

This always works when I preview the site from design studio but when I refresh/reload the site the error occurs.

I have tried restarting the site from admin centre.

I have tried Creating a web template and using it in a page template then page template on Web Page.

[EmadBeshai]

Hi @MikePower ,

You need to define the below function before starting using the webpai calls for the portal

(function(webapi, $){
	function safeAjax(ajaxOptions) {
		var deferredAjax = $.Deferred();
		shell.getTokenDeferred().done(function (token) {
			// add headers for AJAX
			if (!ajaxOptions.headers) {
				$.extend(ajaxOptions, {
					headers: {
						"__RequestVerificationToken": token
					}
				});
			} else {
				ajaxOptions.headers["__RequestVerificationToken"] = token;
			}
			$.ajax(ajaxOptions)
				.done(function(data, textStatus, jqXHR) {
					validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
				}).fail(deferredAjax.reject); //AJAX
		}).fail(function () {
			deferredAjax.rejectWith(this, arguments); /*on token failure pass the token AJAX and args*/
		});
		return deferredAjax.promise();
	}
	webapi.safeAjax = safeAjax;
})(window.webapi = window.webapi || {}, jQuery)
  

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up. 

[MikePower]

Thanks for the reply😃 @EmadBeshai ,

I have added the Wrapper ajax as webtemplate and included in the target web page,

In addition to this i have added the WebAPi function(ajax) in the target webpage.

Still no luck 😕

[EmadBeshai]

Hi @MikePower ,

Could you please follow the instructions in this article  Deep dive into Power Apps Portal Web API - Dancing with CRM where @OOlashyn already mentioned the possible solutions for your issue.

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.