typescript.txt

>>>>> TypeScript <<<<<<<<

---------------------------------------
---------------------------------------
Search Keys: 
             fetch()
---------------------------------------
---------------------------------------
---------------------------------------



----------------------------------------------------------------------

JavaScript:

In JavaScript, the fetch() method is used to make asynchronous requests to the server and load the information that is returned by the server onto the web pages.

Syntax:

fetch(URL, options);


Code:

fetch('https://reqres.in/api/products')

  .then(res => res.json())

  .then(data => console.log(data))

  .error(e => console.error(e))

.............................................


Init (optional): Any further options such as:

  Method: The request method is either GET or POST.
  Headers
  Body: The body can be any of the following: Body.array.Buffer(), Body.Blob(), Body.formData(), Body.json(), Body.text().
  Mode
  Credentials
  Cache

.........................

  Example:

  fetch('url', {
  Method: 'POST',
  Headers: {
    Accept: 'application.json',
    'Content-Type': 'application/json'
  },
  Body: body,
  Cache: 'default'
})

....................................

 GetImage().catch(error => {
      console.error(error);
 });

  async function GetImage(){
       const response = await fetch('/anim.jpg');
       const blob = await response.blob();
       document.getElementById('flower').src=URL.createObjectURL(blob);
  }

....................................

  getData();

  async function getData(){
       const response= await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita%’)
       console.log(response);
       const data= await response.json();
       console.log(data);
       length=data.drinks.length;
       console.log(data);
       var temp="";
       for(i=0;i<length;i++)
       {
          temp+="<tr>";
          temp+="<td>"+data.drinks[i].strDrink+"</td>";
          temp+="<td>"+data.drinks[i].strInstructions+"</td>";
       }

    document.getElementById("data").innerHTML=temp;
  }


................................

Using fetch() to POST JSON Data:

Object {
  title: "",
  body: "",
  id: 101
}

body: ""

id: 101

title: ""


var form=document.getElementById('form')

form.addEventListener('submit', function(e){
 e.preventDefault()

 var name=document.getElementById('name').value
 var body=document.getElementById('body').value

 fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title:name,
    body:body,

  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  }
  })
  .then(function(response){ 
  return response.json()})
  .then(function(data)
  {console.log(data)
  title=document.getElementById("title")
  body=document.getElementById("bd")
  title.innerHTML = data.title
  body.innerHTML = data.body  
}).catch(error => console.error('Error:', error)); 
});

-------------------------------------------------------------------------