DEV Community

Cover image for Web APIs
Kanhaiya Banjara
Kanhaiya Banjara

Posted on

Web APIs

Web APIs are interfaces that allow web applications to communicate with external services or data sources over the internet.

1. REST API

  • REST APIs use standard HTTP methods & are stateless. They
    typically return data in JSON or XML format.

  • Used for web services, where resources are accessed via URLs. Commonly used for CRUD operations on data.

  • Example: GitHub API, Twitter API.

fetch('https://api.github.com/users/octocat')
    .then(responce => responce.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
Enter fullscreen mode Exit fullscreen mode

2. SOAP API

  • SOAP is a protocol that uses XML for message format & typically relies on HTTP or SMTP for message negotiation & transmission.

  • Enterprise-level applications requiring security, reliability, and
    formal contracts (WSDL).

  • Example: Payment gateways, financial services APIs.

const soap = require('soap');
const url = 'https://www.example.com/service?wsdl';
soap.createClient(url, (err, client) => {
    if (err) throw err;
    client.MyFunction({ param: 'value' }, (err, result) => {
        if (err) throw err;
        console.log(result);
    });
});
Enter fullscreen mode Exit fullscreen mode

3. GraphQL API

  • GraphQL allows clients to request exactly the data they
    need, and nothing more. It uses a single endpoint and
    provides more flexibility compared to REST.

  • When you need efficient querying of complex datasets, or when working with mobile applications where bandwidth
    is a concern.

  • Example: Facebook's GraphQL API, Shopify API.

const { request, gql } = require('graphql-request');
const query = gql`
    {
        user(login: "octocat"){
            name
            bio
        }
    }
`;

request('https://api.github.com/graphql', query)
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
Enter fullscreen mode Exit fullscreen mode

4. WebSocket API

  • WebSocket's enable real-time, two-way communication between client and server over a single, long-lived connection.

  • Real-time applications like chat applications, live sports updates, and online games.

  • Example: Slack API, trading platforms.

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = ()=>{
    console.log('Connected');
    socket.send(JSON.stringify({type: 'follow', channel: 'news'}));
};

socket.onmessage = event =>{
    console.log('Message from server', event.data);
};

socket.onclose = () =>{
    console.log('Disconnected');
}
Enter fullscreen mode Exit fullscreen mode

5. OAuth API

  • OAuth is a protocol that allows third-party applications to grant limited access to user accounts on an HTTP service, typically used for authentication and authorization.

  • Used for single sign-on (SSO) and authorization across different services.

  • Example: Google OAuth 2.0, Facebook Login API

const axios = require('axios');
const token = 'your_oauth_token';
axios.get('https://api.example.com/userinfo', {
    headers: { Authorization: `Bearer ${token}` }
})
    .then(responce => console.log(responce.data))
    .catch(error => console.error('Error:', error));
Enter fullscreen mode Exit fullscreen mode

6. Batch API

  • Batch APIs allow clients to make multiple API calls in a single HTTP request, often improving performance by reducing the number of network requests.

  • When a client needs to perform multiple actions at once or when working with large datasets.

  • Example: Facebook Graph API batch requests

fetch('https://graph.facebook.com/v11.0', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        batch: [
            { method: 'GET', relative_url: 'me' },
            { method: 'GET', relative_url: 'me/friends' }
        ],
        access_token: 'your_access_token'
    })
})
    .then(responce => responce.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
Enter fullscreen mode Exit fullscreen mode

Top comments (0)