axios面试题

谈谈你对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