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

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(...)