axios 配置默认 GET 参数答案

【问题标题】：Axios config default GET paramaxios 配置默认 GET 参数
【发布时间】：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，拦截器对我来说完全有意义:) 很好的解决方案！