如何用axios传动态参数给url

Question

后端接口的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后再去调用接口？

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

拼接或正则替换

let params = {id:11};

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

PS:

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

Answer 5

你可以了解一下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
    .....
})

Answer 6

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
    });
}