javascript 将参数/自变量传递给axios拦截器

a8jjtwal  于 2022-12-28  发布在  Java
关注(0)|答案(7)|浏览(175)

如何将自定义参数发送到 axios 拦截器?我使用的拦截器如下所示:

window.axios.interceptors.request.use(function (config) {
    if (PASSED_PARAM == true) {
        doSomethingAwesome();
    }

    return config;
}, function (error) {    
    return Promise.reject(error);
});

我还有一个需要接收相同参数的响应拦截器。

vh0rcniy

vh0rcniy1#

合并参数

axios.interceptors.request.use((config) => {
  config.params = {...config.params, my_variable: 'value'}
  return config
})
gc0ot86w

gc0ot86w2#

@Laurent建议的方法会导致axios擦除您所有的其他参数,并将其替换为my_variable,这可能并不完全是您想要的。

添加默认参数而不是替换的正确方法如下:

axios.defaults.params = {};
axios.interceptors.request.use(function (config) {
    config.params['blah-defaut-param'] = 'blah-blah-default-value';
    return config;
}, function (error) {
    return Promise.reject(error);
});

这适用于axios 0.18.1。由于回归bug,它不适用于axios 0.19...,我相信很快就会修复。

4szc88ey

4szc88ey3#

工作溶液

发送数据时,使用Axios拦截器向查询添加参数实际上相当简单。

axios.interceptors.request.use((config) => {
  config.params = {my_variable: 'value'}
  return config
})
b1payxdu

b1payxdu4#

axios允许传递一些额外的请求参数:

axios.post('/api', `some body`,
    {headers: {'Content-Type': ' text/html;charset=UTF-8'},
    param: true});

和拦截器:

this.axios.interceptors.request.use(req => {   
    console.log(`${req.method}: ${req.param}`); //output: `/api: true`
    return req;
    });

我已经在以下版本上进行了测试:0.21.1

ycggw6v2

ycggw6v25#

已接受的答案以及本页上的答案似乎没有回答问题所问的内容。
这个问题是问类似于“当我调用axios时,我可以将数据传递给拦截器而不是服务器吗?”的问题,答案是肯定的,尽管它没有文档说明,并且在使用 typescript 时,你必须添加一个//@ts-ignore。
当你调用axios的时候,你可以传递一个config对象,(或者在url之后,或者如果你没有使用像.get/.post这样的快捷方法,axios函数只接受一个config对象。好消息是config对象总是和响应沿着传递的,这样你就可以在拦截器和承诺处理器中得到它。
它在响应对象上作为response.config可用,在错误上作为error.response.config可用

//@ts-ignore -- typescript will complain that your param isn't expected on the config object.
axios({
    method: "get",
    url: '/myapi/gocrazy',
    // just piggyback any data you want to the end of config, just don't
    // use any key's that axios is already expecting
    PASSED_PARAM: true
}

//in the interceptor, config is attached to the object, and it keeps any extra keys you tacked on the end.

window.axios.interceptors.request.use(function (config) {
   if (config.PASSED_PARAM == true) {
    doSomethingAwesome();
   }

   return config;
   }, function (error) {
   
   return Promise.reject(error);
});

window.axios.interceptors.response.use(function (response) {
   if (response.config.PASSED_PARAM == true) {
    doSomethingAwesome();
   }

   return response;
   }, function (error) {
   
   if (error.response.config.PASSED_PARAM == true) {
    doSomethingElseAwesome();
   }

   return Promise.reject(error);
});
polkgigr

polkgigr6#

我最终使用了headers对象。不确定这是否是推荐的,或者它是否是反模式的。但是无论如何它是有效的。我不完全确定头部添加到服务器请求头部的字节数,但是我认为它是可以忽略的。

qlckcl4x

qlckcl4x7#

你不能传递参数,但是你可以更新传递的参数config。请求拦截器逻辑在执行请求之前运行。它有点像中间件,所以也许你需要访问令牌并更新请求头

axios.interceptors.request.use(
  (config) => {
    // or maybe you need to read the stored cookies
    const user = localStorage.getItem("user");   
    if (user) {
      // If user exists get the token
      const token = JSON.parse(user).token;
      // and then update the headers
      config.headers.Authorization = `Bearer ${token}`;
    }   
    // maybe u need to refresh the access tokens, you do it in interceptor
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

相关问题