请求
const handldeComfirmTermwork = async (params) => {
try {
const { id, sid, label } = params
const res = await comfirmTermwork({ id, sid, label })
if (res.code === 0) {
message.success('操作成功')
PageStore.getPageList()
} else {
message.error(get(res, 'message', '接口返回数据异常'))
}
} catch (error) {
message.error(error || '请求异常')
}
}
url中参数的处理方式
在React中获取url中的参数可以使用window.location.search属性得到。这个属性返回一个以问号(?)开头的字符串,这个字符串包含了url中的查询参数部分。可以利用解析URL查询字符串的方法来提取查询参数。以下是一个示例:
javascript
function getQueryParam(name) {
const search = window.location.search;
const urlParams = new URLSearchParams(search);
return urlParams.get(name);
}
const id = getQueryParam('id');
console.log(id);
这个函数使用了URLSearchParams对象来解析URL查询字符串,并且提供了一个getQueryParam函数来获取指定名称的查询参数。比如,上述例子中的getId('id')函数将返回查询参数id的值。
注意,在使用window.location.search时,需要确保当前页面的URL是包含查询参数的。
URLSearchParams 是一个 JavaScript 内置对象,它可以用来处理 URL 查询参数的类。它提供了一组方法,用于添加、获取、删除、替换 URL 查询参数。
使用 URLSearchParams 对象,你可以方便地从 URL 查询字符串中提取查询参数,也可以动态创建和修改查询字符串。下面是一些常用的方法:
append(name, value):添加一个带有指定名称和值的新搜索参数。
delete(name):从搜索参数列表中删除指定名称的第一个搜索参数。
get(name):返回指定搜索参数的第一个值。
getAll(name):返回指定搜索参数的所有值。
has(name):如果搜索参数列表中存在指定名称的搜索参数,则返回 true。
set(name, value):将指定名称的第一个搜索参数替换为指定值。如果未找到指定名称的搜索参数,则追加一个带有指定名称和值的新搜索参数。
以下是一个简单的示例:
javascript
const params = new URLSearchParams('?name=john&age=30');
params.append('language', 'javascript');
params.set('age', '40');
console.log(params.toString());
console.log(params.get('age'));
console.log(params.has('gender'));
在这个例子中,我们创建了一个新的 URLSearchParams 对象,并向其添加了一些 URL 查询参数。 params.toString() 方法返回一个包含查询参数的字符串形式。 我们还使用 get 和 has 方法来检索查询参数,使用 append 和 set 进行修改。
是的,有一些第三方库可以方便地处理URL查询参数,以及在React中获取url中的查询参数。以下是一些常用的库:
qs:一个简单的字符串化和解析 URL 查询字符串的库,支持解析数组和嵌套对象,同时也支持基本的 URL 编码和解码。 qs 的文档地址:https:
query-string:一个轻量级的解析和串化查询字符串的库,提供了与 qs 相似的 API,它的文档地址:https:
这些库可以使从URL中提取查询参数变得更加简单方便。不过如果只需要处理简单的URL查询参数,使用原生的URLSearchParams对象通常足够了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
2022-06-01 elmentui中组件的属性,事件,方法和插槽使用。以el-tree为例,熟悉Attributes props methods event slots的使用
2020-06-01 fastadmin 错误提示Call to a member function exams() on null
2020-06-01 thinkphp5的增删改查操作,DB和模型两者的区别
2020-06-01 thinkphp5的with函数
2020-06-01 三略-下略
2020-06-01 三略-中略
2020-06-01 三略-上略