axios调接口传参特殊字符丢失的问题(encodeURI 和 encodeURIComponent)

最新推荐文章于 2024-09-05 09:57:39 发布

原创

最新推荐文章于 2024-09-05 09:57:39 发布 · 1.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

文章讲述了在使用axios调用接口时，遇到特殊字符丢失的问题，通过encodeURIComponent编码参数解决了该问题。同时介绍了encodeURI和encodeURIComponent的区别以及如何解码。

1、axios调接口特殊字符丢失的问题

项目开发过程中遇到一个接口传参，参数带特殊字符，axios调接口特殊字符丢失的问题

例如接口：

get/user/detail/{name}

name是个参数直接调接口的时候拼到接口上，get/user/detail/test123#$%，调接口发现后面的特殊字符#$%丢失了，调的接口变成了get/user/detail/test123

2、解决办法：

参数使用encodeURIComponent编译一下，再拼到接口上，这样特殊字符不会丢失，后端可以正常接收参数。

import Axios from 'src/axios/index.js';

     
const name = 'test123#$%';

// 直接拼接口上
Axios.get(`get/user/detail/${name}`).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 参数使用encodeURIComponent编译一下,再拼接口上
Axios.get(`get/user/detail/${encodeURIComponent(name)}`).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 直接拼接口上