Skip to content

Mar 27: Working with APIs

Learning Objectives

After today's class, you should be able to:

  • Explain how to use the keywords async and await in JavaScript.
  • Make requests to a third-party API using PostMan and fetch().
  • Handle successful and unsuccessful responses from a third-party API.

Lesson Outline

Slides [25 min]

Tutorial [30 min]

  • Exploring the Canvas API – see instructions below

Work Time [20 min]

API Tutorial

Note

We'll use Hoppscotch, an open-source alternative to Postman that runs in the browser (using local storage) and does not require creating an account.

Step 1: Hoppscotch Setup

  1. Install the Hoppscotch Extension for your browser. This extension allows you to override CORS restrictions for cross-origin requests while running Hoppscotch.
  2. Open Hoppscotch. Notice the sample url https://echo.hoppscotch.io is provided for testing. Click the Send button to see the JSON response.
  3. In the right sidebar, click the "+ New" button to add a new collection. Name the collection Canvas (this is just a way to organize your requests).
  4. Hover over the Canvas collection, and three toolbar buttons should appear. Click the "Add Request" button. Name the request List your courses. A new editor tab should appear in the main section on the left.
  5. Change the URL for the GET request to https://canvas.jmu.edu/api/v1/courses. Try pressing the Send button; you should get a network error. Open the DevTools console to see the error (Access to … has been blocked by CORS policy).
  6. Click the radio button for "Browser extension" to bypass the CORS policy. Then click Send again; you should now see a JSON response that says you are unauthenticated.

Step 2: Canvas API Token

  1. In a new tab, go to your User Settings in Canvas.
    • Scroll down to the bottom of the "Approved Integrations" section and click the "+ New Access Token" button.
    • Describe the purpose of your token (Ex: CS 343 Activity or Hoppscotch).
    • Give a relatively short expiration date, like the end of today's class. You can always make another token later.
    • Click the "Generate Token" button. Leave the token visible until you get a chance to copy it during the next step.
  2. In Hoppscotch, hover over the Canvas collection, click the "3 dots" () menu, and click Properties.
    • Click the Authorization tab, change the Authorization Type to Bearer, and paste your Canvas token from the previous step.
    • Then click the Save button. (Any requests you make in the Canvas collection will automatically use this API token.)
  3. Click the Send button. This time, you should see a longer JSON response containing data about your courses.
  4. Add another request to the Canvas collection (like you did in Step 4).
  5. See the All API Resources section of the Canvas API documentation for other requests that you can make.

Step 3: Request via fetch()

  1. Click the Generate Code () button on the right toolbar (between the main section and the right sidebar).
  2. Change the dropdown to JavaScript - Fetch. Then click the Copy () button.
  3. Open the DevTools console, and paste the JavaScript code. Press Enter to run the code. You should see the same error as before (Access to … has been blocked by CORS policy).
  4. Switch to a tab where you are already logged into Canvas, and open the DevTools console. Press the Up arrow to recall the previous code, and press Enter. This time, the code should run without error.
  5. Press the Up arrow again to edit your code. Remove the options variable (in both places), so that your API token is not used. Press Enter, and notice that the response succeeds anyway. Can you explain why?

Step 4: Test Other APIs

  1. In Hoppscotch, create a new collection named Free APIs. Add the following requests to the collection:
  2. Run each of the above examples, both in Hoppscotch and in JavaScript. Try rewriting the JavaScript as shown below.
  3. Try accessing the APIs that you will use for your group project. See the collective list of free APIs on GitHub for ideas.
  4. See the Hoppscotch Documentation for more advanced examples of how to use Hoppscotch.

Tip

The autogenerated code: 

const url = 'https://picsum.photos/id/0/info';
const options = {method: 'GET'};

try {
  const response = await fetch(url, options);
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
}
Can written more concisely: 
fetch('https://picsum.photos/id/0/info')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));