如何用axios传动态参数给url

naroul
  • 4
新手上路,请多包涵

后端接口的url是这样的:

https:.../node/:id/children

这里的:id是在url中的,需要我用获取到的id 替换掉字符串中 :id 的部分,然后用最终拼接的url发送请求

在这想请问一下大佬们, axios中有这种匹配url中动态参数的功能吗?
我尝试在axios参数中传入{ params: { id: 123 } },但是没有用,最终请求的url是这样的:

https:.../node/:id/children?id=123

我查看了axios文档,没有类似的情况
所以是不是这种情况只能通过手动拼接url后再去调用接口?

回复
阅读 892
6 个回答

没看见有这么个API,我通常也是url拼接做的

在拦截器处理就好了,检查到存在:xxx格式以及携带params参数,就把url改了就行了

axios的url你传动态的就去不就好了,/node/123/children这样

后台给的是示例,所以要手动改。

拼接或正则替换

let params = {id:11};

`.../node/${params.id}/children`;

PS:

qs.stringify() 将对象 序列化成URL的形式,以&进行拼接
https://blog.csdn.net/qq_3912...

你可以了解一下javascript的模板字符串写法:https://developer.mozilla.org...

比如后台给定请求类似指定用户信息api:http://xxxx/api/v1/user/:id
这里是指需要传入一个用户id值进行参与请求,类似于:http://xxxx/api/v1/user/1245545
假设有用户部分信息,含id值:const user1={id:1245545,name:'张三'};
使用axios进行请求传递相应id值:
axios({
    url:`http://xxxx/api/v1/user/${user1.id}`, // 这样写这里就会自动编译为:http://xxxx/api/v1/user/1245545
    .....
})

axios建议封装在用,你遇到这个问题说明你axios封装的不对
正确的做法

function api(id){
    axios({
        url:`/node/${id}/children`
    })
}

调用直接掉api('asdas'),甚至这个也要封装一下:

axios({
    url:`/node/${id}/children`
})

封装成

const send = async (url, method, options){
    return await axios.request({
        url,
        method,
        headers: options.headers,
        params: { ...options.params },
        data: typeof options.data === 'object' && !Array.isArray(options.data) ? { ...options.data } : options.data
    });
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏