axios:如何拦截并响应axios请求

Fre*_*sen 6 javascript axios

有没有一种方法不仅可以拦截 axios 请求,还可以在发送之前对其进行响应?就像这样,从浏览器发送请求并从浏览器响应它+阻止它发送请求。

我知道我可以在axios interceptors请求和响应发送并返回到组件之前拦截请求和响应,并且我知道在请求拦截器中我可以抛出错误并用失败的请求触发响应拦截器。我该如何做同样的事情才能成功请求?给定某些条件,我希望 axios 能够响应,就像它传递到服务器一样,而实际上它从未通过拦截器。这可能吗?

这是我到目前为止所得到的伪代码:

      axios.interceptors.request.use(
      request => {
        if (localResponse) {
              throw { isLocal: true, data: { hello: 'world' } }; // <- this will stop request and trigger 
                                                                 // response error. I want to trigger 
                                                                 // the actual response callback
        } else {
            return request;   // <- will perform full request
        }
      },
      error => {
        return Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      response => {
        return response; // <- I want to trigger this callback
      },
      error => { // <- so far i can only trigger a response error
        if (error?.isLocal) { 
          return Promise.resolve(error.data); 
        }
        
        return Promise.reject(error);
      }
    );
Run Code Online (Sandbox Code Playgroud)

我尝试只解决请求拦截器,但尝试继续满足请求。有人有解决这个问题的创意吗?也许有比使用拦截器更好的解决方案?

Fre*_*sen 7

设法自己编写一个解决方案。这样我所有的 axios 调用都不必改变,我可以只改变拦截器的行为。

注意:如果有人提出更好的解决方案,我会很乐意将他们的答案标记为正确并投票。目前这是我能想到的最好的解决方案。

解决方案

这是我解决问题的方法

      axios.interceptors.request.use(
      request => {
        if (localResponse) {
              throw { isLocal: true, data: { hello: 'world' } }; // <- this will stop request and trigger 
                                                                 // response error. I want to trigger 
                                                                 // the actual response callback
        } else {
            return request;   // <- will perform full request
        }
      },
      error => {
        return error?.isLocal 
                    ? Promise.resolve(error); // <- triggers response intercept
                    : Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      response => {
        return response; 
      },
      error => {
          error?.isLocal 
                ? Promise.resolve(error); // <- sends as successful response
                : Promise.reject(error);
      }
    );
Run Code Online (Sandbox Code Playgroud)

本质上,我所做的就是抛出错误以阻止请求通过,然后解决错误而不是拒绝它。这有点麻烦,但它可以完成工作。

  • 多么美丽又丑陋的黑客:D (5认同)