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

中处理？

我试过这个

// 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

确保您返回 Promise.reject：

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

Answer 2

您可以为

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() 指定预期的 

this ：

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 3

我遇到了同样的问题。下面的github评论给出了启示。

https://github.com/axios/axios/issues/2509#issuecomment-576277859