CODEWITHSUNDEEP
javascriptnode.jsapi-design
Olivier
Olivier

Reputation: 655

How to create a simple API in Javascript to fetch the title of an external web page

I'm totally new to APIs. I'm trying to build a simple API on cyclic.sh that will return the title of a web page given as argument. My API is located at https://shy-ruby-basket-clam-gear.cyclic.app/ and the code is available on GitHub at https://github.com/odebroqueville/starter-micro-api. The API was built from an existing template.

The main code is as follows:

const http = require('http');

// Helper function to get the title of a web page
async function getTitle(url){
    try {
        const request = new Request(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'text/html'
            }
        });
        const response = await fetch(request);
        const html = await response.text();
        let title = '';
        const titleMatches = html.match(/<title.*?>.*?<\/title>/gmi)||[];
        if (titleMatches.length > 0) {
            title = titleMatches[0];
            console.log(title);
        }
        if (title.search(/<title/gi) !== -1){
            const titleText = title.substring(title.indexOf('>')+1);
            const res = titleText.replace('</title>','');
            console.log(res);
            return res;
        }
        return '';
    } catch (err) {
        console.error(`Failed to retrieve title with error: ${err}`);
        return '';
    }
}

http.createServer(function (req, res) {
    const url = req.url.replace('https://shy-ruby-basket-clam-gear.cyclic.app/','');
    console.log(`Just got a request at ${req.url}!`)
    const title = getTitle(url);
    res.write(title);
    res.end();
}).listen(process.env.PORT || 3000);

Unfortunately, when I visit 'https://shy-ruby-basket-clam-gear.cyclic.app/https://www.coursera.org/learn/introduction-git-github' it produces an error that I don't understand instead of return the title of the web page https://www.coursera.org/learn/introduction-git-github

enter image description here

Any help I can get to better understand how to make this API work would be greatly appreciated.

Upvotes: 0

Views: 437

Answers (1)

Daxay Makwana
Daxay Makwana

Reputation: 65

First, you should use NodeJs v18 or v19.

Since Fetch API introduced from 18th version.

Also, you should use async/await in your http server's callback function.

So, now your code should now look like this.

const http = require('http');

// Helper function to get the title of a web page
async function getTitle(url){
    try {
        const request = new Request(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'text/html'
            }
        });
        const response = await fetch(request);
        const html = await response.text();
        let title = '';
        const titleMatches = html.match(/<title.*?>.*?<\/title>/gmi)||[];
        if (titleMatches.length > 0) {
            title = titleMatches[0];
            console.log(title);
        }
        if (title.search(/<title/gi) !== -1){
            const titleText = title.substring(title.indexOf('>')+1);
            const res = titleText.replace('</title>','');
            console.log(res);
            return res;
        }
        return '';
    } catch (err) {
        console.error(`Failed to retrieve title with error: ${err}`);
        return '';
    }
}

http.createServer(async function (req, res) {
    const url = req.url.replace('http://shy-ruby-basket-clam-gear.cyclic.app/','').slice(1);
    console.log(`Just got a request at ${req.url}!`)
    const title = await getTitle(url);
    res.write(title);
    res.end();
}).listen(process.env.PORT || 3000);

Upvotes: 2

Related Questions