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

sg24os4d 于 2023-11-18 发布在 iOS

关注(0)|答案(3)|浏览(148)

有没有一种方法不仅可以拦截，而且还可以在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);
      }
    );

字符串
我已经尝试过只解析请求拦截器，但它试图继续满足请求。有人有任何创造性的想法来解决这个问题吗？也许有比使用拦截器更好的解决方案？

axios

来源：https://stackoverflow.com/questions/62686283/axios-how-to-intercept-and-respond-to-axios-request

3条答案

按热度按时间

gopyfrb31#

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

字符串
本质上，我所做的就是抛出一个错误来阻止请求通过，然后解决错误而不是拒绝它。这有点笨拙，但它完成了工作。

赞(0）回复(0）举报 2023-11-18

klsxnrf12#

在本地场景中，您可以完全跳过请求吗？

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

字符串

赞(0）回复(0）举报 2023-11-18

vsmadaxz3#

您可以提供自定义adapter

import axios, { getAdapter } from 'axios';

const xhrAdapter = getAdapter('xhr');

axios.defaults.adapter = (config) => {
  if (useLocal) {
    return Promise.resolve({
      data: yourData,
      status: 200,
      statusText: 'ok',
      headers: {},
      config: config,
      request: {}
    });
  }
  return xhrAdapter(config)
}

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

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

3条答案

相关问题

热门标签

最新问答