APIs on Aamnah - Frontend Web Developer

Transforming API response with Axios `transformResponse()` function

Sat, 16 Sep 2023 15:39:19 +0300

1axios({
2  method,
3  url,
4  transformResponse: [(data) => {
5    return data
6  }]
7}).then(response => { console.log(response) })

If you’re getting undefined, there are a few things that you need to keep in mind.

The response returned is a STRING, you need to parse it to JSON
Use a try .. catch block so that you catch errors

 1async function fetchMovieGenres() {
 2  // Get the list of official genres for movies.
 3
 4  const TMDB_API_TOKEN = ''
 5  
 6  try {
 7    let response = await axios({
 8      url: `/genre/movie/list`,
 9      method: `get`,
10      baseURL: `https://api.themoviedb.org/3`,
11      headers: {
12        Authorization:
13          `Bearer ${TMDB_API_TOKEN}`,
14      },
15      transformResponse: [
16        (response) => {
17          // Do whatever you want to transform the data
18          // e.g. convert the genres array of objects into object of objects
19          // easier to get values by ID that way
20
21          // 1. Use a try catch block to find errors
22          try {
23            console.log(`API Response:`, response)
24            // 2. Response is a STRING. You need to parse it to JSON
25            // One way to identify that right away is interactivity with the response in Console
26            // Objects can be interacted with, can be folded and are color coded. Strings are just gray text
27            console.log(`Response type from API:`, typeof response)
28
29            let parsedResponse
30
31            try {
32              parsedResponse = JSON.parse(response)
33              console.log(`Parsed Response: `, parsedResponse)
34              console.log(`Response type after parsing:`, typeof parsedResponse)
35            } catch (error) {
36              console.error(
37                `There was an error while parsing response data`,
38                error
39              )
40            }
41
42            if (parsedResponse.status === 'success') {
43              return parsedResponse.data
44            } else {
45              console.error(`There was an error while fetching data`)
46            }
47
48          } catch (error) {
49            console.error(
50              `There was an error with Axios transformResponse()`,
51              error
52            )
53          }
54        },
55      ],
56    })
57    return response
58  } catch (error) {
59    console.error(
60      `There was an error when getting movie genres with Axios: \n${error}`
61    )
62  }
63}

Get raw file data from Github API

Tue, 07 Mar 2017 00:00:01 +0500

You can use the send an Accept hedaer with the conent-type you want with your http requests. Many APIs allow you to request the same resource in different content-types.

// Content-Type: application/vnd.github.v3.raw
http -v get https://api.github.com/gitignore/Node Accept:application/vnd.github.v3.raw

Notes

If you ask for an unsupported media/content type, you’ll get a 415: Unsupported Media Type error
Response code 200s: success
Response code 300s: location is elsewhere (or already in cache i.e. 307)

AJAX

Thu, 24 Nov 2016 00:00:00 +0500

AJAX `XMLHttpRequest()`

 1const xhr = new XMLHttpRequest();
 2
 3xhr.open('GET', url);
 4xhr.onload = function() {
 5  if(xhr.status === 200) {
 6    console.log(xhr.response)
 7  }
 8};
 9xhr.onerror = function() {};
10xhr.send();

onReadyStateChange has been around since original spec. In v2, onload, onprogress and onerror were introduced, which are basically different states. Instead of defining a function that looks for onReadyStateChange === 4, you can use the onload function, which is more to the point and less typing.s

onReadyStateChange === 4 is the same as onload
onReadyStateChange === 3 is the same as onprogress

CORS

When CORS is not supported, you’ll pull your hair. One solution is adding http://crossorigin.me/ at the beginning of your resource URL. But this only works for images, for JSON objects, it converts them to plain text. CrossOrigin.me

APIs on Aamnah - Frontend Web Developer

Transforming API response with Axios `transformResponse()` function

Links

Get raw file data from Github API

Notes

Links

AJAX

AJAX `XMLHttpRequest()`

CORS

APIs on Aamnah - Frontend Web Developer

Transforming API response with Axios `transformResponse()` function

Links

Get raw file data from Github API

Notes

Links

AJAX

AJAX XMLHttpRequest()

CORS

AJAX `XMLHttpRequest()`