Jermaine

Posted on Aug 2, 2018 • Edited on Feb 19, 2019 • Originally published at creativebracket.com

Quick tip: How to make HTTP requests (Dart)

#dart #http #beginners #tips

It's quite common to build web applications that pull in data from other web applications, initiated by logic that performs HTTP calls to third party services.

In today's quick tip, we will look at how we can use the inbuilt HttpClient and HttpRequest classes to make HTTP calls to external services. These classes are used on the server and client respectively.

On the server

Dart provides the HttpClient class in the dart:io library for making HTTP calls. Here's an example of it in action:

import 'dart:io';
import 'dart:convert';

void main() {
  HttpClient()
    .getUrl(Uri.parse('https://swapi.co/api/people/1')) // produces a request object
    .then((request) => request.close()) // sends the request
    .then((response) => response.transform(Utf8Decoder()).listen(print)); // transforms and prints the response
}

Running this file will give you the JSON response below:

{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male","homeworld":"https://swapi.co/api/planets/1/","films":["https://swapi.co/api/films/2/","https://swapi.co/api/films/6/","https://swapi.co/api/films/3/","https://swapi.co/api/films/1/","https://swapi.co/api/films/7/"],"species":["https://swapi.co/api/species/1/"],"vehicles":["https://swapi.co/api/vehicles/14/","https://swapi.co/api/vehicles/30/"],"starships":["https://swapi.co/api/starships/12/","https://swapi.co/api/starships/22/"],"created":"2014-12-09T13:50:51.644000Z","edited":"2014-12-20T21:17:56.891000Z","url":"https://swapi.co/api/people/1/"}

And then there's the prettier async/await version:

import 'dart:io';
import 'dart:convert';

void main() async {
  var request = await HttpClient().getUrl(Uri.parse('https://swapi.co/api/people/1')); // produces a request object
  var response = await request.close(); // sends the request

  // transforms and prints the response
  await for (var contents in response.transform(Utf8Decoder())) {
    print(contents);
  }
}

Here's a video I made earlier:

On the client

Dart provides the HttpRequest class in the dart:html library:

import 'dart:html';

void main() {
  HttpRequest.getString('https://swapi.co/api/people/1')
    .then(print);
}

And with async/await:

import 'dart:html';

void main() async {
  print(await HttpRequest.getString('https://swapi.co/api/people/1'));
}

Try this snippet on DartPad.

UPDATE: 06-10-2018

On of my Medium readers wondered how to make POST requests on the client. Thought it useful to have my answer here too:

You can make a POST request by using the postFormData static method:

var data = { 'firstName' : 'John', 'lastName' : 'Doe' };
HttpRequest.postFormData('/send', data).then((HttpRequest resp) {
  // Do something with the response.
});

The Content-Type header will be set to Content-Type: application/x-www-form-urlencoded; charset=UTF-8 by default, unless you want the payload to be treated as a JSON object:

import 'dart:html';
import 'dart:convert';

void main() {
  var data = { 'title' : 'My first post' };
  HttpRequest.request(
    'https://jsonplaceholder.typicode.com/posts',
    method: 'POST',
    sendData: json.encode(data),
    requestHeaders: {
      'Content-Type': 'application/json; charset=UTF-8'
    }
  )
  .then((resp) {
    print(resp.responseUrl);
    print(resp.responseText);           
  });
}

// Response
// https://jsonplaceholder.typicode.com/posts
// { "title": "My first post", "id": "101" }

Try this snippet on DartPad.

To offer a uniform solution for client and serverside requests, the Dart team have created the excellent HTTP package, now available on Pub.

And that's it for today's quick tip. Check out the documentation links below to learn how you could perform other types of requests.

Like, share and follow me for more content on Dart.

Learn more

Lastly...I want to thank you all for the positive feedback on my "Darticles"🤓. I've had increasing support ⭐ which really means a lot and I'm very glad to see growth in the Dart community due to innovations like Flutter and Aqueduct.

Top comments (6)

teknohipy • Feb 19 '19

Thanks for this. Followed!
Which IDE do you use?

I'm having trouble getting your HttpRequest.getString to work on an actual web app... works fine on DartPad, but not in an IDE. I use WebStorm (seems to be most popular / supported.)
I've gotten basic apps working with both webstorm templates 'bare bones web app' & 'console application'. But following similar steps, pasting your code, running, returns empty browser tabs. and no console printout. (What makes it 'just work' in a DartPad?)

Many thanks for any insight... I'm a Swift dev, an Xcode guy, and brand-new to web development:)

Jermaine • Feb 19 '19

Hey @teknohipy , I use Visual Studio Code with this extension. Also, I've launched a new blog at creativebracket.com. Do check it out for more tutorials :)

teknohipy • Feb 19 '19

Thanks man, i'll try it out. Will check out your blog too.

IDE choices aside though... what else is needed to build your code into an actual working program?

(like i asked "What makes it 'just work' in a DartPad?")

It seems, "DartPad" just gives console printouts, for those who don't have an IDE... but, unless your code actually runs in an IDE, producing output (ie console printouts) can you really call it a working program!

Jermaine • Feb 19 '19

what else is needed to build your code into an actual working program?

The webdev tool by the Dart team handles serving and bundling web-based projects. It works out-the-box with the project structure below:

web
  style.css
  main.dart
  index.html
pubspec.yaml

It would be a good idea to look at stagehand by the Dart team. It generates the scaffolding for a project including the necessary packages. I've got some video tutorials on my YouTube channel going through this.