JAVASCRIPT

fetch api javascript

fetch('http://example.com/songs')
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(err => console.error(err));

fetch javascript

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Fetch

The fetch() method in JavaScript is used to request to the server and load 
the information on the webpages. The request can be of any APIs that return 
the data of the format JSON or XML. 

This method returns a promise.

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

fetch api javascript

fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(myJson);
  });

js fetch

fetch('http://example.com')
	.then(response => response.text())
	.then(data => console.log(data))
	.catch(err => console.error(err));
/* for JSON, use response.json() on the 2nd line */

fetch

//Obj of data to send in future like a dummyDb
const data = { username: 'example' };

//POST request with body equal on data in JSON format
fetch('https://example.com/profile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
//Then with the data from the response in JSON...
.then((data) => {
  console.log('Success:', data);
})
//Then with the error genereted...
.catch((error) => {
  console.error('Error:', error);
});

//

fetch method in js

import React, { useEffect, useState } from "react";

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

  useEffect(() => {
    fetchData();
  },[])

  return (
    <main>
      <h1>User List</h1>
      <ul>
        {user && user.length > 0 && user.map((userObj, index) => (
            <li key={userObj.id}>{userObj.name}</li>
          ))}
      </ul>
    </main>
  );
}

export default App;

Javascript fetch api

fetch('https://example.com/path', 
      {method:'GET', 
       headers: {
         'Authorization': 'Basic ' + btoa('login:password') //use btoa in js and Base64.encode in node
       }
      })
.then(response => response.json())
.then(json => console.log(json));

fetch

const options = {method: 'GET', headers: {Accept: 'application/json'}};

fetch('https://api.test.com/data/id', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

fetch function javascript

const loadData = () => {
    const url = `...URL...`;
    fetch(url)
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(error = console.log(error))
};

loadData();

// See Results On Browser Consol

fetch api in js

// fetch API
var myData = async () => {
    try {
       const raw_response = await fetch("https://jsonplaceholder.typicode.com/users");
       if (!raw_response.ok) { // check for the 404 errors
           throw new Error(raw_response.status);
       }
       const json_data = await raw_response.json();
          console.log(json_data);
       }
       catch (error) { // catch block for network errors
            console.log(error); 
        }
}
fetchUsers();

fetch get request

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

Fetch Javascript

fetch('/payment', {
    method: 'POST', 
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'url': '/payment',
        "X-CSRF-Token": document.querySelector('input[name=_token]').value
    },
})

fetch api example

function App() {
  fetch("https://catfact.ninja/fact")
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
    });

fetch api

// Error handling while fetching API

const url = "http://dummy.restapiexample.com/api/v1/employee/40";
fetch(url) //404 error
     .then( res => {
          if (res.ok) {
                return res.json( );
          } else {
                return Promise.reject(res.status); 
           }
      })
      .then(res => console.log(res))
      .catch(err => console.log('Error with message: ${err}') ); 

fetch api javascript

fetch('https://apiYouWantToFetch.com/players') // returns a promise
  .then(response => response.json()) // converting promise to JSON
  .then(players => console.log(players)) // console.log to view the response

fetch

// Get
fetch('<your-url>')
  .then((response) => response.json()).then(console.log).catch(console.warn);

// POST, PUT
data = "your data"
fetch('<your-url>', {
  method: 'POST', // or 'PUT'
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
})
.then(response => response.json()).then(console.log).catch(console.warn);

javascript fetch request GET

// Update fields in form based on API GET request
function update_form_fields(term, field){ 
  fetch("/api/profiles/?format=json")
    .then((response)=>{
    return response.json();
  }).then((data) => {
    let profile = data.find(el => el[field] == term);      
    document.getElementById("name-input").value = profile.name;
    document.getElementById("email-input").value = profile.email;
  });}

fetch request

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

fetch

const fetch = require('node-fetch');

    let response = await fetch(`your url paste here`, {
      headers: {
        Authorization: `Token ${API_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
      method: 'POST',
    });
    const results = await response.json();
    console.log("======> :: results", results);

.fetch method

fetch('http://example.com/data.json')
  .then(data => data);
  .catch(err => console.log(err));

fetch api

// Making get requests

const url = "http://dummy.restapiexample.com/api/v1/employees"; 
fetchurl()
     .then(res => {
            console.log(res);
})
      .catch(err => {
             console.log('Error: ${err}' ); 
});

fetch

var formData = new FormData();
var fileField = document.querySelector("input[type='file']");

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

js fetch

fetch('https://pokeapi.co/api/v2/pokemon/').then(function (response) {
  return response.json(); // This returns a promise!
}).then(function (pokemonList) {
  console.log(pokemonList); // The actual JSON response
}).catch(function () {
  // Error
});

fetch

 
async function sendMe()
{

let r =await fetch('/test', {method: 'POST', body: JSON.stringify({a:"aaaaa"}), headers: {'Content-type': 'application/json; charset=UTF-8'}})
let res = await r.json();
console.log(res["a"]);
}
 

fetch api javascript

  headers = {
            'X-CoinAPI-Key': 'CB1D352F-23E7-4D64-97AC-FB5AEF4839FD'
        }
        fetch('https://rest.coinapi.io/v1/exchangerate/BTC', { headers })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })

fetch api javascript

fetch('https://picsum.photos/600/300')
    .then(res => res.blob())
    .then(blob => {
        let img = document.createElement('img');
        console.log(img);
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img)
        docuemnt.querySelector('body').appendChild(img);
    });

fetch api

  const RcaApi = async () => {
    const url = await fetch(
      "http://quencies.alshumaal.com/api/RCAs/getallRcas.php"
    );
    const data = await url.json();
    setFetchData(data.getallRCAs);
  };
  useEffect(() => {
    RcaApi();
  }, [setFetchData]);

JavaScript Fetch API

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });

javascript fetch mehtod

//feth method 

// - take the url as parameter
// - return a promise
// - pass response when resolved
// - pass error when rejected
// - the response has the http response information
// - use the .json() is used to get the body of the response
// - .json return a promise
// - resolve the promise with data as the argument

        fetch("test.json")
            .then(response =>{
                return response.json();
            }).then(data=>{
                document.body.innerHTML = data.name;
                console.log(data)
            }).catch(error =>{
                console.error(error)
            })

JavaScript fetch API

fetch('https://shazam.p.rapidapi.com/search?term=kiss%20the%20rain&locale=en-US&offset=0&limit=5', {
    // request method
    method: 'GET',

    // headers from the API documentation
    headers: {
        'X-RapidAPI-Key': '8bd90c4cffmsh2788964981ec641p113417jsn3d0aff3880f5',
        'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
    }
})
   .then((result) => result.json())  // result from API endpoint
   .then((data) => console.log(data))  // result in json format
   .catch((error) => console.log(error));  // catching the error should it occur

fetch api

async function fetchdata()
{
return await (await fetch("http://example.com/k.json")).json()
}

fetch js

// space in "C ontent-Type"
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });

fetch

  fetch(APIURL)
      .then((res) => res.json())
      .then((users) => setData(users))
      .catch((err) => console.log(err));

JavaScript Fetch API

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

fetch

fetch("https://skilltest.dgcal.it/check_step_4", {
    method: "POST",
    body: 
       'username=federica-schillaci'
   ,
   
})

fetch

GET /orgs/octokit/repos