There seems to be an issue with accessing the 'request' property of an undefined object

Question

There seems to be an issue with accessing the 'request' property of an undefined object

Currently, I am in the process of incorporating a base service into an Angular application. This service is designed to provide methods to other services for composing requests with default headers and options. However, I encounter an issue when attempting to call the get or post methods. These methods simply invoke this.request, but I am encountering a ZoneAwarePromise error.

ERROR Error: Uncaught (in promise): Cannot read property 'request' of undefined
    at resolvePromise (zone.js:831)
    at zone.js:896
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)
defaultErrorLogger  @   core.js:15714
...

This error is perplexing because I have confirmed that this.request exists by logging its value before using it within the post method.

interface Options {
  payload?: any,
  headers?: any,
  options?: any
}

@Injectable()
export class ApiService {
    private host: string = `${environment.apiUrl}`;

    constructor(private http: HttpClient) {}

    public get(route: string, options?: any) {
        return this.request(route, 'GET', options);
    }

    public post(route: string, options?: any) {
        return this.request(route, 'POST', options);
    }

    public setToken(token: string) {
        localStorage.setItem('Token', token);
    }

    public unsetToken() {
        localStorage.removeItem('Token');
    }

    private request(route: string, method: string, requestOptions?: any): Promise<void> {
        return new Promise((resolve, reject) => {
            ...
        });
    }
}

I am seeking assistance to resolve this error and successfully call the request method without encountering any issues.

EDIT

The post method is being called within the following login method:

@Injectable()
export class AuthService {
    private user: any = null;

    constructor(private service: ApiService) {
        ...
    }

    ...
}

javascript angular typescript

Answer 1

Answer №1

Understanding the concept of this in JavaScript is crucial, as it is determined by the function's runtime binding.

When calling the http post method internally, it invokes the 'request' method on the http object. However, if you reference the post and invoke it, the this reference may become undefined in strict mode.

An alternative approach is to directly use the http object.

  private request(route: string, method: string, requestOptions?: any): Promise<void> {
      return new Promise((resolve, reject) => {
          const url = new URL(route, this.host);
          const { payload, headers, options }: Options = requestOptions || {};
          const defaultHeaders = { 'Content-Type': 'application/json' };
          const token = localStorage.getItem('Token');
          if(token) { defaultHeaders['Authorization'] = token; }

          const optionsDefinition = {
                  ...options,
                  withCredentials: true,
                  headers: new HttpHeaders({...defaultHeaders, ...headers})
          };

          this.http[method.toLowerCase()](url.toString(), payload, optionsDefinition)
              .subscribe(() => {console.log('resolve'); resolve();},
                  () => {console.log('reject');reject(); });
      });
  }

Another method to address the issue with the this object is by using the bind method.

   const fn = this.http[method.toLowerCase()].bind(this.http);

Check out the demo 🚀🚀

Explore more about 'this' 🧙‍♂️

Answer 2

Understanding the concept of this in JavaScript is crucial, as it is determined by the function's runtime binding.

When calling the http post method internally, it invokes the 'request' method on the http object. However, if you reference the post and invoke it, the this reference may become undefined in strict mode.

An alternative approach is to directly use the http object.

  private request(route: string, method: string, requestOptions?: any): Promise<void> {
      return new Promise((resolve, reject) => {
          const url = new URL(route, this.host);
          const { payload, headers, options }: Options = requestOptions || {};
          const defaultHeaders = { 'Content-Type': 'application/json' };
          const token = localStorage.getItem('Token');
          if(token) { defaultHeaders['Authorization'] = token; }

          const optionsDefinition = {
                  ...options,
                  withCredentials: true,
                  headers: new HttpHeaders({...defaultHeaders, ...headers})
          };

          this.http[method.toLowerCase()](url.toString(), payload, optionsDefinition)
              .subscribe(() => {console.log('resolve'); resolve();},
                  () => {console.log('reject');reject(); });
      });
  }

Another method to address the issue with the this object is by using the bind method.

   const fn = this.http[method.toLowerCase()].bind(this.http);

Check out the demo 🚀🚀

Explore more about 'this' 🧙‍♂️

There seems to be an issue with accessing the 'request' property of an undefined object

Answer №1

Similar questions

The script is not functioning properly when placed outside of the HTML body tag

Link Google Map Marker Click Event with Dynamic Binding

Creating an uncomplicated search bar that dynamically adjusts values based on its function

Display the Bootstrap datepicker within an h4 element set to default to today's date, utilizing both Angular and jQuery

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

Animating CSS with jQuery for a background image effect

"Successful implementation of Ajax function in local environment but encountering issues when running online

What is the best way to continuously compare two date variables every minute using Javascript?

Title remains consistent | Angular 4

Installing Vue JavaScript using the npm command

The code inside the promise .then block is executing long before the promise has completed its

Guide to dynamically implementing pagination through AJAX calls

Angular4 allows for the creation of a div that can horizontally scroll

Working with Ruby on Rails by editing a section of embedded Ruby code in a .js.erb file

Tips for deactivating data monitoring in a Vue.js component attribute

I require the variable to be accessible from all corners

JavaScript button mouse enter

Dealing with the element not present error in Protractor can be managed by using various

Dealing with Typescript in Node.js: Handling the error 'Property not found on type Global & typeof globalThis'

What could be preventing the webpack dev server from launching my express server?