EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript HTTP Request
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

TypeScript HTTP Request

TypeScript HTTP Request

Introduction to TypeScript HTTP Request

The http requests in TypeScript are made in order to fetch or bring the data from an external web server or post the data to an external web server. Such requests can be placed using a function called fetch() function, and this fetch function takes two parameters: URL and options where URL is the URL of the website that we are trying to access. The options parameter takes two values, GET and POST, where GET is used to fetch the contents of the website whose URL is specified, and POST is used to post the contents to a website whose URL is specified, and the default value for options is GET.

Syntax to declare an HTTP Request in TypeScript:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

fetch(URL, options);

Where URL is the URL of the website that we are trying to access and options parameter takes two values GET and POST where GET is used to fetch the contents of the website whose URL is specified and POST is used to post the contents to a website whose URL is specified and the default value for options is GET.

Working of HTTP Request in TypeScript

  • The http requests in TypeScript are made in order to fetch or bring the data from an external web server or post the data to an external web server.
  • The http requests in TypeScript can be placed using a function called fetch() function.
  • The fetch() function takes two parameters, namely URL and options and returns a Response object.
  • The response object received by using the fetch() function consists of useful information such as text(), headers, json(), status, statusText etc.
  • When the value of options passed as a parameter to the fetch function is POST, we have several options using this parameter: body, method, and headers.

Examples of TypeScript HTTP Request

Given below are the examples of TypeScript HTTP Request:

Example #1

TypeScript program to place a simple http GET request to a website by passing the URL of the website as the parameter to the fetch function and then converting the response from the website into a text format and printing it as the output the screen.

Code:

//node fetch module is loaded to be able to make use of fetch function
const fetch = require('node-fetch');
//the URL of the website whose contents are to be fetched is passed as the parameter to the fetch function
fetch('https://facebook.com')
//then() function is used to convert the contents of the website into text format
.then(result => result.text())
//the contents of the website in text format is displayed as the output on the screen
.then(textformat => console.log(textformat))

Output:

TypeScript HTTP Request 1

In the above program, the node fetch module is loaded to be able to make use of the fetch function. Then the URL of the website whose contents are to be fetched is passed as a parameter to the fetch function. Then the () function is used to convert the contents of the website into text format. Then the contents of the website in text format are displayed as the output on the screen.

Example #2

TypeScript program to place a simple http POST request to a website by passing the URL of the website as the parameter to the fetch function and then convert the posted content to the website into a json format and print it as the output on the screen.

Code:

//node fetch module is loaded to be able to make use of fetch function
const fetch = require('node-fetch');
//the content to be posted to the website is defined
let todo = {
userId: 01234,
title: "SAP BW Hana Consultant",
completed: True
};
//the URL of the website to which the content must be posted is passed as a parameter to the fetch function along with specifying the method, body and header
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: { 'Content-Type': 'application/json' }
})
//then() function is used to convert the posted contents to the website into json format
.then(result => result.json())
//the posted contents to the website in json format is displayed as the output on the screen
.then(jsonformat=>console.log(jsonformat));

Output:

TypeScript HTTP Request 2

In the above program, the node fetch module is loaded to be able to make use of the fetch function. Then the contents to be posted to the website is defined. Then the URL of the website to which the content must be posted is passed as a parameter to the fetch function along with specifying the method, body and header. Then the () function is used to convert the posted contents to the website into json format. Then the posted contents to the website in json format are displayed as the output on the screen.

Rules and Regulations

Given below are the rules and regulations for HTTP requests in TypeScript:

  • The http requests in TypeScript can be placed by making use of a function called fetch() function.
  • The URL of the website whose contents must be fetched or to which the contents must be posted should be passed as a parameter to the fetch() function.
  • The second parameter options to the fetch function are GET methods by default, but if you want to post something to a website, then it is necessary to mention the POST method as an options parameter in the fetch() function.
  • The contents of the website fetched must be converted into text format to display it as the output for the program.
  • The contents to be posted to the website must be converted into json format to be displayed as the output for the program.

Recommended Articles

We hope that this EDUCBA information on “TypeScript HTTP Request” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. TypeScript let
  2. TypeScript typeof
  3. TypeScript Cast Object
  4. TypeScript Generic
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more