手写axios实现请求响应拦截器和中断请求

最新推荐文章于 2025-03-19 11:08:19 发布

遗世独立hws

最新推荐文章于 2025-03-19 11:08:19 发布

阅读量765

点赞数

分类专栏： js 前端学习面试题文章标签： axios promise

本文链接：https://blog.youkuaiyun.com/huangwensu/article/details/115490255

版权

本文详细介绍了如何手写一个类似axios的库，实现请求的响应拦截器，用于处理如错误统一处理、添加全局 headers 等操作。同时，通过模拟实现请求中断功能，探讨了在并发请求中如何管理和取消请求，提高应用的性能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       function Axios(config) {
            this.default = config;
            this.interceptors = {
                request: new InterceptorManager(),
                response: new InterceptorManager(),
            }
        }
        Axios.prototype.request = function(config) {
            let promise = Promise.resolve(config);
            var chains = [dispatchRequest, undefined];
            // 将拦截器回调返回值压入chain
            this.interceptors.request.handles.forEach(item => {
                chains.unshift(item.fulfilled,item.rejected)
            })
            this.interceptors.response.handles.forEach(item => {
                chains.push(item.fulfilled,item.rejected)
            })
            while(chains.length) {
                promise = promise.then(chains.shift(), chains.shift());
            }
            return promise
        }
        function dispatchRequest(config) {
            return xhrAdapter(config).then(response &