Question

是否有一种方法不仅可以拦截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);
      }
    );

我尝试解决请求拦截器，但是尝试继续执行请求。有没有人有解决这个问题的创意？也许有比使用拦截器更好的解决方案？

Answer 1

设法自己撰写解决方案。这样，我的所有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);
      }
    );

本质上，我正在做的是抛出一个错误以阻止请求通过，但是然后解决了错误而不是拒绝了它。有点棘手，但可以完成工作。

Answer 2

您能否仅在本地情况下完全跳过该请求？

function getData() {
  if (localResponse) {
    return Promise.resolve({ isLocal: true, data: { hello: 'world' }});
  }
  else {
    return axios.whatever;
  }
}
...
getData().then(...)

Axios：如何拦截和响应axios请求

2 个答案: