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);
      }
    );

基本上我正在做的是拋出一個錯誤以阻止請求通過，然后解決錯誤而不是拒絕它。 這有點hacky，但它完成了工作。

Answer 2

您可以在本地場景中完全跳過請求嗎？

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