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

 

axios有哪些常用方法？
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作

 

说下axios的相关配置属性？

url 适用于请求的服务器URL

baseURL 将自动加url在前面，除非url是一个绝对URL，

responseType 表示浏览器将要的相应数据类型，默认值：json，还包括其他：arraybuffer、document、json、text、stream

transformRequest 允许在向服务器发送前，修改请求数据，只能用在put、post、patch这几个请求方法

headers 即将被发送的自定义请求头

params 即将于请求一起发送的url参数，必须是个无格式对象或URLSearchParams对象

auth 表示HTTP基础验证应当用于连接处理，并提供凭据，这将设置一个Authorization头，覆盖掉已有的Authorization头

proxy 定义代理服务器的主机名和端口

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
        username: 'admin',
        password: '123456'
    }    
}