ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

axios面试题

2022-05-12 17:32:34  阅读:305  来源: 互联网

标签:面试题 拦截器 请求 chain request axios interceptor


谈谈你对axios的理解?

axios是基于XMLHttpRequest服务来执行HTTP请求,支持Promise。

它可以拦截请求和响应

可以转换请求数据和响应数据,对响应的内容进行自动转换

 

axios拦截器的原理?

Axios.prototype.request是真正的请求

在Axios.prototype.request维护一个数组

将request请求拦截器放到数组的前面,将response响应拦截器放到数组的后面,

组成Promise链式调用

function Axios(){
    this.interceptors = {
        //两个拦截器
        request: new interceptorsManner(),
        response: new interceptorsManner()
    }
}
//真正的请求
Axios.prototype.request = function(){
    let chain = [dispatchRequest, undefined];//这儿的undefined是为了补位,因为拦截器的返回有两个
    let promise = Promise.resolve();
    //将两个拦截器中的回调加入到chain数组中
    this.interceptors.request.handler.forEach((interceptor)=>{
        chain.unshift(interceptor.fulfilled, interceptor.rejected);
    })
    this.interceptors.response.handler.forEach((interceptor)=>{
        chain.push(interceptor.fulfilled, interceptor.rejected);
    })
    while(chain.length){
        //promise.then的链式调用,下一个then中的chain为上一个中的返回值,每次会减去两个
        //这样就实现了在请求的时候,先去调用请求拦截器的内容,再去请求接口,返回之后再去执行响应拦截器的内容
        promise = promise.then(chain.shift(),chain.shift());
    }
}
function interceptorsManner(){
    this.handler = [];
}
interceptorsManner.prototype.use = function(fulfilled,rejected){
    //将成功与失败的回调push到handler中
    this.handler.push({
        fulfilled: fulfilled,
        rejected: rejected
    })
}
//类似方法批量注册,实现多种请求
util.forEach(["get","post","delete"],(methods)=>{
    Axios.prototype[methods] = function(url,config){
        return this.request(util.merge(config||{},{//合并
            method: methods,
            url: url
        }))
    }
})

 

为什么支持浏览器中发送请求也支持node发送请求?

使用的是适配器模式

  1. 在default.js文件中判断环境,然后根据环境使用对应的适配器
  2. 在 axios.defaults.adapter 中可以找到

 

简单实现一个对axios的封装?

import axios from 'axios'
const service = axios.create({
    baseUrl: '',
    timeout: '',
    headers: {}
})

service.interceptors.request.use(
    config => {
        if(token){
            config.headers.token = token
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

service.interceptor.response.use(
    response => {
        let res = response
        switch (res.data.code){
            case 200: 
                return res.data
                break;
        }
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

 

标签:面试题,拦截器,请求,chain,request,axios,interceptor
来源: https://www.cnblogs.com/naturl/p/16263371.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有