promise - Axios 拦截器 : how to throw errors in the 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

您可以为 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() 相同的接口(interface)。在使用 .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
    )
};