vue.js中的axios参数编码[重复]

【问题标题】：vue.js中的axios参数编码[重复](axios parameter encoding in vue.js [duplicate])
【发布时间】：2022-01-27 19:58:51
【问题描述】：

我正在使用带有 axios 的 vue.js 从 API 端点获取数据。

我需要的网址是这样的：

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.9070999995]]],"spatialReference":{"wkid":102100,"latestWkid":3857}}&geometryType=esriGeometryPolygon&inSR=102100&outFields=*&outSR=102100

但不知何故，axios 将参数变成了这样的东西：

?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.985399999%255D%252C%255B346560.7393000014%252C6675742.419500001%255D%252C%255B346564.2879999988%252C6675731.5568%255D%252C%255B346564.4406999983%252C6675729.9070999995%255D%255D%255D%252C%2522spatialReference%2522%253A%257B%2522wkid%2522%253A102100%252C%2522latestWkid%2522%253A3857%257D%257D&geometryType=esriGeometryPolygon&inSR=102100&outFields=*&outSR=102100

然而，端点期望参数是这样的：

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.90100000054%2C6675744.985399999%5D%2C%5B346560.7393000014%2C6675742.419500001%5D%2C%5B346564.2879999988%2C6675731.5568%5D%2C%5B346564.4406999983%2C6675729.9070999995%5D%5D%5D%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%2C%22latestWkid%22%3A3857%7D%7D

看起来几何参数的编码是错误的，或者不是 api 所期望的。

这是我的代码：

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);
            });

我应该怎么做才能让我的数据/网址以正确的格式用于端点？

提前非常感谢:)

我不知道？我需要像这样编码几何参数： &geometry=%7B%22rings%22%3A%5B%5B%5B346564.4406999983 等 ``` 所以你建议我使用 paramsSerializer 自己构建查询字符串？我希望有更简单的东西:) 但我会试一试
尝试对几何体进行字符串化，例如： geometry: JSON.stringify({ rings: [...], ... })

【解决方案1】：

你可以使用这种类型：

const axios = require('axios')


const params = new URLSearchParams()
params.append('name', 'Akexorcist')
params.append('age', '28')
params.append('position', 'Android Developer')
params.append('description', 'birthdate=25-12-1989&favourite=coding%20coding%20and%20coding&company=Nextzy%20Technologies&website=http://www.akexorcist.com/')
params.append('awesome', true)

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

axios.post(url, params, config)
  .then((result) => {
    // Do somthing
  })
  .catch((err) => {
    // Do somthing
  })

或者您可以将选项作为参数传递给您的方法：

testMethodforCallApi(){
const options = {
                    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: ''
};
API.APIMethod(options).then(response => {
console.log(response)});
}

然后：

APIMethod(options) {
return axios.get(process.env.VUE_APP_WATERINFO_RISK_URL, {Params: options});
}

分享于2022年07月17日 axios ionic-framework javascript urlencode vue.js 问答