Receiving an undefined response from Axios get request

Question

Receiving an undefined response from Axios get request

I've encountered a peculiar issue while working with axios get calls.

try {
        console.log('assetAddress', assetAddress);
        var options = {
            method: 'GET',
            url: `https://testnets-api.opensea.io/api/v1/events?only_opensea=false&limit=20&asset_contract_address=${assetAddress}`,
            headers: { "Accept": 'application/json' }
        };
        console.log(options.url)
        res = await axios.request(options);
        return res.data;
    } catch (e) {
        //console.log(e)
    }

When I include assetAddress in the url and attempt to retrieve the result, it returns undefined. However, if I manually input the actual address 0x15352F80426ec9b94412b45242d7040b5dFeB5E6, it works fine.

Any idea why this happens?

javascript axios string-interpolation

Answer 1

Answer №1

It appears that the issue lies with the scope of your assetAddress variable.

Here are two examples showcasing two different approaches

Instead of using async / await, you can utilize the .then and .catch functions in the following manner:

const assetAddress = "0x15352F80426ec9b94412b45242d7040b5dFeB5E6"

var options = {
  method: 'GET',
  url: `https://testnets-api.opensea.io/api/v1/events?only_opensea=false&limit=20&asset_contract_address=${assetAddress}`,
  headers: {
    "Accept": 'application/json'
  }
};
axios.request(options)
  .then(res => console.log(res.data))
  .catch(error => console.log(error))

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>

If you prefer the classical approach, you can still achieve the same functionality by:

const assetAddress = "0x15352F80426ec9b94412b45242d7040b5dFeB5E6"

async function loadData() {
  console.log("Loading Data")
  var options = {
    method: 'GET',
    url: `https://testnets-api.opensea.io/api/v1/events?only_opensea=false&limit=20&asset_contract_address=${assetAddress}`,
    headers: {
      "Accept": 'application/json'
    }
  };
  try {
    const res = await axios.request(options)
    console.log(res)
  } catch (error) {
    console.log(error)
  }
}

document.getElementById('loadDataButton').addEventListener('click', loadData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>

<button id="loadDataButton">Load data</button>

Answer 2

It appears that the issue lies with the scope of your assetAddress variable.

Here are two examples showcasing two different approaches

Instead of using async / await, you can utilize the .then and .catch functions in the following manner:

const assetAddress = "0x15352F80426ec9b94412b45242d7040b5dFeB5E6"

var options = {
  method: 'GET',
  url: `https://testnets-api.opensea.io/api/v1/events?only_opensea=false&limit=20&asset_contract_address=${assetAddress}`,
  headers: {
    "Accept": 'application/json'
  }
};
axios.request(options)
  .then(res => console.log(res.data))
  .catch(error => console.log(error))

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>

If you prefer the classical approach, you can still achieve the same functionality by:

const assetAddress = "0x15352F80426ec9b94412b45242d7040b5dFeB5E6"

async function loadData() {
  console.log("Loading Data")
  var options = {
    method: 'GET',
    url: `https://testnets-api.opensea.io/api/v1/events?only_opensea=false&limit=20&asset_contract_address=${assetAddress}`,
    headers: {
      "Accept": 'application/json'
    }
  };
  try {
    const res = await axios.request(options)
    console.log(res)
  } catch (error) {
    console.log(error)
  }
}

document.getElementById('loadDataButton').addEventListener('click', loadData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>

<button id="loadDataButton">Load data</button>

Receiving an undefined response from Axios get request

Answer №1

Similar questions

HTML - Selecting Different Values in One Drop Down Based on Another Drop Down

Determining if a URL links to an image when the file extension is not informative

Angular 4 showcases the information stored within this dataset

Modifying the color of elements within a picture

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

Encountering difficulties with the functionality of Google Places API

Tips for filtering data using an array within an object containing arrays

Is there a way to avoid adding this final "faulty state" to the array?

jQuery for validating input fields with positive integers only using regular expressions

Including a JavaScript file using script tags can cause issues with jQuery UI

Combining React state value with an HTML tag would be a great way

Display popup just one time (magnific popup)

Injecting AngularJS service into a karma-mocha test: Step-by-step guide

Having difficulty obtaining accurate window height in Chrome

Why does Javascript in Angular throw an exception when using value, match, and replace functions together?

Unable to display an image element in fullscreen within a modal that is already fullscreen

Tips for adding a CSS class to an HTML element on-the-fly

The rule "react/jsx-sort-props" does not have a valid configuration

The useEffect() method used without any cleanup function

Angular: Defining variables using let and var