带空格的Axios GET请求参数 [英] Axios GET Request Param with Whitespace

问题描述

目标

我想使用axios传递GET请求的查询参数. param值是string类型的变量，具有空格.

问题

似乎axios正在以我的后端无法理解的格式对参数进行编码.我已经对axios编码进行了研究，看来axios将空白编码为+而不是%20.

示例

假设您有此请求:

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

参数foo, bar, encode, simple全部起作用，并使用正确的数据生成响应.参数space, encoded无法生成正确的数据.请求成功，返回200，但不返回任何数据.

我在Postman中用相同的查询创建了相同的请求，以查看GET是否返回了预期的结果，并且确实如此.我在邮递员中添加了%20，它返回的效果很好.我在邮递员中添加了+，它也返回了预期的结果.

问题

变量实现可能出什么问题?没有像bar参数这样的变量，我无法做到这一点，因为该值正在传递给函数(Redux动作).关于此的任何想法或想法都将有所帮助.如果需要更多信息，请发表评论.

解决方案

似乎是一个的问题(或默认的参数序列化行为).

因此，要克服这一点，您有2个选择.

1. 在URL本身中定义查询参数

const whitespace = "white space";
axios.get(`/api?space=${whitespace}`);

2. 编写您自己的paramsSerializer来构建查询字符串.

const whitespace = "white space";
const encodeWhitespace = encodeURI(whitespace);
const noSpace = "no";

axios.get('/api', {
    params: {
        'foo': 'bar',
        'bar': 'hello world',
        'space': whitespace,
        'simple': noSpace
    },
    paramsSerializer: (params) => {
        // Sample implementation of query string building
        let result = '';
        Object.keys(params).forEach(key => {
            result += `${key}=${encodeURIComponent(params[key])}&`;
        });
        return result.substr(0, result.length - 1);
    }
});

注意:上面的paramsSerializer也可以在全局级别或Axios实例级别定义.

• 全球水平

axios.defaults.paramsSerializer = (params) => { /* ... */ };

• 实例级别

let axInstance = axios.create({ paramsSerializer: (params) => { /* ... */ } })

Goal

I want to pass query params for a GET request using axios. The param value is a variable of type string and has whitespace.

Problem

It seems axios is encoding the param in a format that my backend does not understand. I have done research on axios encoding and it appears axios encodes whitespace to a + and not %20.

Example

Let's say you have this request:

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

The params foo, bar, encode, simple all work and generate a response with the correct data. The params space, encoded do not generate the correct data. The request is successful with 200 but returns no data.

I created the same request in Postman with the same queries to see if the GET returns the expected result and it does. I added the %20 in Postman and it returns just fine. I added the + in Postman and that returns the expected result as well.

Question

What might be going wrong with the variable implementation? I can't do it without the variable like the bar param because the value is being passed to a function (Redux action). Any ideas or thoughts on this would be helpful. Please comment if more information is needed.

解决方案

Seems like this is an issue (or the default parameter serialization behavior) of Axios library.

So to overcome this, you have 2 options.

1. Define your query params in the URL itself

const whitespace = "white space";
axios.get(`/api?space=${whitespace}`);

2. Write your own paramsSerializer to build the query string.

const whitespace = "white space";
const encodeWhitespace = encodeURI(whitespace);
const noSpace = "no";

axios.get('/api', {
    params: {
        'foo': 'bar',
        'bar': 'hello world',
        'space': whitespace,
        'simple': noSpace
    },
    paramsSerializer: (params) => {
        // Sample implementation of query string building
        let result = '';
        Object.keys(params).forEach(key => {
            result += `${key}=${encodeURIComponent(params[key])}&`;
        });
        return result.substr(0, result.length - 1);
    }
});

Note: The above paramsSerializer can be defined in the global level or Axios instance level as well.

• Global level

axios.defaults.paramsSerializer = (params) => { /* ... */ };

• Instance level

let axInstance = axios.create({ paramsSerializer: (params) => { /* ... */ } })

这篇关于带空格的Axios GET请求参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！