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

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

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

例如接口:

get/user/detail/{name}

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

2、解决办法:

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

javascript 复制代码
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);
});

// 直接拼接口上

// 参数使用encodeURIComponent编译一下,再拼接口上

3、延伸

使用params传参,如果直接将参数使用?拼接到后面,也是会存在特殊字符丢失的问题

javascript 复制代码
import Axios from 'src/axios/index.js';
const name = 'test123#$%';

// 直接拼接口上
Axios({
    url: `get/user/detail?name=${name}`,
    method: 'get',
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

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

// 正常逻辑传参数,推荐
Axios({
    url: 'get/user/detail',
    method: 'get',
    params: { name },
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 直接拼接口上

// 参数使用encodeURIComponent编译一下,再拼接口上

// 正常逻辑传参数,推荐

4、encodeURI 和 encodeURIComponent

MDN上关于encodeURI 和 encodeURIComponent的介绍

encodeURI() - JavaScript | MDN

encodeURIComponent() - JavaScript | MDN

encodeURIComponent不转义的字符包括:

类型 包含
非转义的字符 字母 数字 - _ . ! ~ * ' ( )

encodeURI不转义的字符包括:

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字 - _ . ! ~ * ' ( )
数字符号 #

5、解码

encodeURI使用decodeURI解码,encodeURIComponent使用decodeURIComponent 解码

相关推荐
翻滚吧键盘10 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹16 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志19 分钟前
typescript结构化类型应用两例
javascript
杨进军37 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架