utilizing axios encoding settings within vue.js

Question

utilizing axios encoding settings within vue.js

I am currently utilizing vue.js along with axios to retrieve data from an API endpoint.

The specific URL I require is structured like this:

https://base_url.com?f=json&where=&returnGeometry=false&spatialRel=esriSpatialRelIntersects&geometry={"rings":[[[346564.4406999983,6675729.9070999995],[346507.04410000145,6675711.315700002],[346501.2646000013,6675723.884199999],[346495.0234000012,6675737.456500001],[346555.5135000013,6675757.049900003],[346555.91690000147,6675757.180699997],[346555.92969999835,6675757.141800001],[346557.9803000018,6675750.865099996],[346559.90100000054,6675744.985399999],[346560.7393000014,6675742.419500001],[346564.2879999988,6675731.5568],[346564.4406999983,6675729.907099999...

However, when using axios, the parameters get transformed into a different format:

?f=json&where=&returnGeometry=false&spatialRel=esriSpatialRelIntersects
&geometry=%257B%2522rings%2522%253A%255B%255B%255B346564.4406999983%252C6675729.9070999995%255D%252C%255B346507.04410000145%252C6675711.315700002%255D%252C%255B346501.2646000013%252C6675723.884199999%255D%252C%255B346495.0234000012%252C6675737.456500001%255D%252C%255B346555.5135000013%252C6675757.049900003%255D%252C%255B346555.91690000147%252C6675757.180699997%255D%252C%255B346555.92969999835%252C6675757.141800001%255D%252C%255B346557.9803000018%252C6675750.865099996%255D%252C%255B346559.90100000054%252C6675744...

The API endpoint, on the other hand, expects the parameters in this format:

f=json&where=&returnGeometry=false&spatialRel=esriSpatialRelIntersects&geometry=%7B%22rings%22%3A%5B%5B%5B346564.4406999983%2C6675729.9070999995%5D%2C%5B346507.04410000145%2C6675711.315700002%5D%2C%5B346501.2646000013%2C6675723.884199999%5D%2C%5B346495.0234000012%2C6675737.456500001%5D%2C%5B346555.5135000013%2C6675757.049900003%5D%2C%5B346555.91690000147%2C6675757.180699997%5D%2C%5B346555.92969999835%2C6675757.141800001%5D%2C%5B346557.9803000018%2C6675750.865099996%5D%2C%5B346559...

It appears that the encoding for the geometry parameter is incorrect or differs from what the API requires.

Here is the snippet of my code:

return axios
            .get(process.env.VUE_APP_WATERINFO_RISK_URL, {
                params: {
                    f: 'json',
                    where: '',
                    returnGeometry: false,
                    spatialRel: 'esriSpatialRelIntersects',
                    geometry:
                    {
                        "rings": [[[346564.4406999983, 6675729.9070999995], [346507.04410000145, 6675711.315700002], [346501.2646000013, 6675723.884199999], [346495.0234000012, 6675737.456500001], [346555.5135000013, 6675757.049900003], [346555.91690000147, 6675757.180699997], [346555.92969999835, 6675757.141800001], [346557.9803000018, 6675750.865099996], [346559.90100000054, 6675744.985399999], [346560.7393000014, 6675742.419500001], [346564.2879999988, 6675731.5568], [346564.4406999983, 6675729.9070999995]]],
                        "spatialReference": { "wkid": 102100, "latestWkid": 3857 }
                    }
                    ,
                    geometryType: 'esriGeometryPolygon',
                    inSR: '102100',
                    outFields: '*',
                    outSR: '102100',
                    callback: ''
                }
            })
            .then(
                response => {
                    console.log(response);
                })
            .catch(error => {
                console.log(error);
            });

What steps should I take to ensure my data/url conforms to the proper format for the endpoint?

Thank you in advance :)

javascript vue.js ionic-framework axios urlencode

Answer 1

Answer №1

here is a sample code snippet:

const axios = require('axios')


const params = new URLSearchParams()
params.append('name', 'John Doe')
params.append('age', '30')
params.append('position', 'Web Developer')
params.append('description', 'skills=HTML%2CCSS%2CJavaScript&experience=5+ years&portfolio=https://www.johndoe.com/')
params.append('active', true)

const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}

axios.post(url, params, config)
  .then((result) => {
    // Do something with the result
  })
  .catch((err) => {
    // Handle errors
  })

Alternatively, you can define options and pass them as parameters:

customAPICall(){
const options = {
                    format: 'json',
                    region: 'US',
                    population: '>1000000'
};
API.doCustomCall(options).then(response => {
console.log(response)});
}

Then make the API call using the defined options:

doCustomCall(options) {
return axios.get(process.env.CUSTOM_API_ENDPOINT, {Params: options});
}

Answer 2

here is a sample code snippet:

const axios = require('axios')


const params = new URLSearchParams()
params.append('name', 'John Doe')
params.append('age', '30')
params.append('position', 'Web Developer')
params.append('description', 'skills=HTML%2CCSS%2CJavaScript&experience=5+ years&portfolio=https://www.johndoe.com/')
params.append('active', true)

const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}

axios.post(url, params, config)
  .then((result) => {
    // Do something with the result
  })
  .catch((err) => {
    // Handle errors
  })

Alternatively, you can define options and pass them as parameters:

customAPICall(){
const options = {
                    format: 'json',
                    region: 'US',
                    population: '>1000000'
};
API.doCustomCall(options).then(response => {
console.log(response)});
}

Then make the API call using the defined options:

doCustomCall(options) {
return axios.get(process.env.CUSTOM_API_ENDPOINT, {Params: options});
}

utilizing axios encoding settings within vue.js

Answer №1

Similar questions

Achieving JSX rendering in Vue.js with TypeScript starting from a basic CLI setup along with the JSX package integration

Pause the event listener temporarily and reattach it after specific actions have been completed

Press the button to automatically scroll to a designated div section

Is it advisable to load 10,000 rows into memory within my Angular application?

ensure that angular's ng-if directive sets aside space to display content when triggered by an event

A guide on scheduling automatic data insertion in mongoose.js

Real-time monitoring within a callback function in Angular 5

What is the best way to determine the dimensions of a KonvaJs Stage in order to correctly pass them as the height/width parameters for the toImage function

Filter the object by its unique identifier and locate the entry with the highest score

How to properly format credit card input using JavaScript or jQuery

I'm having trouble modifying the backdrop to 'true' or removing it after setting it to 'static' in Bootstrap. Can anyone help me troubleshoot this issue?

Using ReactJS and Ruby on Rails to implement an AJAX delete request

What is preventing me from updating the value of a variable in this manner?

Is it possible to replicate the functionality of "npm run x" without including a "scripts" entry?

Conceal the ion-tabs in an ionic framework

The deep linking feature may fail to function properly when using a redirect URL

What is the best way to create a modal popup window using Vuejs?

Creating a Discord Bot: Building an Embed Table/List with Segmented Sections

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis