axios 配置默认 GET 参数

Posted 2023-02-22

【中文标题】axios 配置默认 GET 参数

【英文标题】：Axios config default GET param

【发布时间】：2019-07-05 07:01:54

【问题描述】：

我在我的 VueJS 应用程序中使用 Axios，我想在我的请求中添加一个默认的 GET 参数。我通过 URL ?api-key=secret 发送我的 API-KEY，我不想每次都指定这个参数。

我在文档中看到我们可以设置Global custom defaults。这样我们就不必每次都指定标题。但是我们可以为 get param 做同样的事情吗？

【问题讨论】：

您想将它添加到标题中还是仅添加到每个 get 请求中？

@Taylor 每个请求。不在标题内

Marcelo 的回答应该有效，或者您可以使用像中间件一样工作的拦截器

【参考方案1】：

这里是：

axios.defaults.params = 
axios.defaults.params['api-key'] = secret

【讨论】：

我用axios的时候不会被其他get param替换？

不，它将保留默认参数并附加您传递的其他参数。

好的，谢谢，我明天检查一下，我会接受答案

【参考方案2】：

如果需要在每次 axios 请求之前调用函数，则应该使用拦截器。

【讨论】：

为什么使用拦截器而不是默认的？

也许您需要在附加密钥之前检查用户令牌

嘿 Félix，这对 OP 来说将是一个很好的评论。但这不是一个好的答案。要获得一个好的答案，您需要指定您的“解决方案”。只是说“嘿，伙计阅读文档”并没有真正的帮助。当然，有拦截器，但你能举个例子吗？否则 OP 将打开下一个问题：“什么是拦截器？”这就是我们一直在努力避免的。

【参考方案3】：

我很难使用两种最常用的建议方法使其与 axios 实例一起工作：

axios.defaults.params = 
axios.defaults.params['api-key'] = secret

并使用params 属性：

const axClient = axios.create(
    baseURL: process.env.VUE_APP_BASE_URL,
    params: 
        api-key: process.env.VUE_APP_API_KEY
    
);

我确实设法使用这样的拦截器让它正常工作：

const axClient = axios.create(
    baseURL: process.env.VUE_APP_BASE_URL,
);

axClient.interceptors.request.use((config) => 
    config.params = config.params || ;
    config.params['api-key'] = process.env.VUE_APP_API_KEY;
    return config;
);

【讨论】：

这是最好的解决方案，以防您使用多个 API 进行连接。就我而言，我有几个axios.create's，拦截器对我来说完全有意义:) 很好的解决方案！