Axios 拦截器：如何在 onFulfill 中抛出错误？

Question

我知道 axios 拦截器可以处理 bot ok 和 ko

axios.interceptors.response.use(
    // onFullfilled
    function(axios_response) {
       return axios_response;
    },

    // onRejected 
    function(axios_error) {
       console.log(axios_error);
       return Promise.reject(axios_error);
    }
)

我的确切问题是：我怎样才能在 onRejected 中抛出一个错误，然后才能在同级 onRejected 中处理 onRejected?

我试过了

// onFullfilled
function(axios_response) {

    if (!axios_response.data) return axios_response;

    const { data } = axios_response;

    if (!data.status || !data.message) return axios_response;

    const { status, message } = data;

    console.log("status", status);
    console.log("message", message);

    if (status === "error") {
        return Promise.reject(axios_response);
    }


    return axios_response;
 },

但我认为这是错误的方式，因为我的拒绝没有被拦截器的 onRejected 处理程序捕获。

Answer 1

你可以为 axios.interceptors.response.use() 写一个相当简单的补丁，比如 axios.interceptors.response.use_()。

在初始化 axios 后，将以下内容放在适当的位置：

axios.interceptors.response.use_ = function(onFullfilled, onRejected) {
    axios.interceptors.response.use(
        // onFullfilled
        function(response) {
            try {
                return onFullfilled(response);
            }
            catch(e) {
                return onRejected(e);
            }
        },
        // onRejected
        onRejected,
    )
};

补丁实现了与原版相同的接口.use()。在使用 .use_() 而不是 .use() 建立拦截后，如果您的 onFullfilled() 抛出（有意或无意），将调用相同的 onRejected 处理程序，就好像拒绝已被拦截一样.

无论如何，这就是它的本质。

如果其中一个处理程序有可能使用关键字 this，则需要使用 Function .prototype .call( ) :

axios.interceptors.response.use_ = function(onFullfilled, onRejected) {
    axios.interceptors.response.use(
        // onFullfilled
        function(response) {
            try {
                return onFullfilled.call(this, response);
            }
            catch(e) {
                return onRejected.call(this, e);
            }
        },
        // onRejected
        onRejected
    )
};

Answer 2

确保 return Promise.rejct:

this.http.interceptors.response.use(async function (response: AxiosResponse<BaseApiResponse, any>) {
          
          if(response.data.code !== ApiCode.OPERATION_SUCCES) {
              return Promise.reject(response.data);
          }
          
          return response;

      }, function (error) {
          return Promise.reject(error);
});

Axios 拦截器：如何在 onFulfill 中抛出错误？

Axios interceptors: how to throw errors in the onFulfill?

interceptor

promise

axios