CODEWITHSUNDEEP
javascript
Mikel Wohlschlegel
Mikel Wohlschlegel

Reputation: 1476

Use async / await with fetch and foreach

This code should do the following: Search all links on the current page and check for multiple errors. The check should be before showing up the results on the page. So I want to fill an array with errors and return it after all checks are finished.

interface LinkObject {
    element: HTMLAnchorElement;
    url: URL;
    checkTrigger?: HTMLButtonElement;
}

interface ErrorObject {
    element: HTMLElement;
    errors: string[];
    warnings: string[];
}


export default class LinkCheckTool {

    protected linksObjects: LinkObject[] = [];
    protected errors: ErrorObject[] = [];

    constructor() {

        document.querySelectorAll('a').forEach((linkElement) => {
            const button: HTMLButtonElement = document.createElement('button');
            button.classList.add('tb-o-linkobject__btn');
            const url: URL = new URL(linkElement.href);
            if (url) {
                linkElement.appendChild(button);
                this.linksObjects.push({
                    element: linkElement,
                    url: url,
                    checkTrigger: button
                })
            }
        })

        const errors = this.fetchErrors();
        console.log(errors); // results in an empty array, so need to use async / await here
    }

    protected fetchErrors() {
        const errors = [];
        this.linksObjects.forEach((linkObject) => {
            if (linkObject.url.protocol !== 'javascript:') {
                fetch(linkObject.url.href)
                  .then((response) => (response))
                  .then((response) => {
                      if (!response.ok) {
                          // push to errors here
                      }
                  })
                  .catch((error) => {
                      // push to errors here
                  })
            }
        })
    }
}

In this case, the console output of errors returns an empty array, of course. How can I use async / await and return a promise here?

Upvotes: 0

Views: 362

Answers (1)

Tonnio
Tonnio

Reputation: 655

Function fetchErrors is not async here, because it does not return Promise. And since you try to call the function in the constructor async/await syntax won't really work in this context.

What you need to do instead is to use Promise callback here. You can apply the Promise.allSettled method. It will help you to wait until your requests will get resolved and then you can handle the responses one by one.

constructor() {
    // ...
    
    const errors = [];

    this.fetchErrors().then(results => {
        results.forEach(result => {
            if (result.status === "rejected") {
                errors.push(result.value)                
            }
        })

        console.log(errors); // will print you list of errors
    });
    
}

protected fetchErrors() {
    const requests = this.linksObjects
        .filter(linkObject => linkObject.url.protocol !== 'javascript:')
        .map((linkObject) => fetch(linkObject.url.href))

    return Promise.allSettled(requests);
}

Upvotes: 1

Related Questions