axios 配置默认 GET 参数

Question

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

我在文档中看到我们可以设置 全局自定义默认值。这样我们就不必每次都指定标题。但是我们可以为 get param 做同样的事情吗？

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里是：

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

原文由 Marcelo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我努力使用两种最常用的建议方法让它与 axios 实例一起使用：

 // method 1: setting axios.defaults.params at the class level
axios.defaults.params = {}
axios.defaults.params['api-key'] = secret

和

// method 2: setting the `params` attribute at an instance level
const axClient = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    params: {
        api-key: process.env.VUE_APP_API_KEY
    }
});

然而，我确实使用这样的拦截器设法让它很好地工作：

 // create an instance with default properties
const axClient = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
});

axClient.interceptors.request.use((config) => {
    // use config.params if it has been set
    config.params = config.params || {};
    // add any client instance specific params to config
    config.params['api-key'] = process.env.VUE_APP_API_KEY;
    return config;
});

这种方法的好处是，如果需要，实例级参数可以根据请求动态/计算。

作为一个（稍微做作的）示例，如果您需要向每个请求添加一个 JWT（包括从您选择的存储方法中获取它的任何逻辑），甚至对围绕它的逻辑做出反应。因此，在这个玩具示例中，如果用户在存储中没有 JWT，则将他们重定向到登录页面而不是发出请求。

原文由 DazBaldwin 发布，翻译遵循 CC BY-SA 4.0 许可协议