axios源码之模拟实现axios发送请求

axios内部运作流程大致如下

axios入口-
->axios构造函数-
->interceptors请求拦截器-
->dispatchRequest方法-
->transformRequest请求转换器-
->adapter适配器-
->transformResponse响应转换器-
->interceptors响应拦截器

具体模拟实现axios使用dispatchRequest方法，以及adapter适配器发送一个异步请求的核心代码

    //模拟axios发送请求
    //1、声明构造函数
    function Axios(config){
        this.config = config;
    }
    //为Axios的原型对象添加request方法,axios(),axios.get()等，核心就是调axios.request()方法
    Axios.prototype.request = function(config){
        //创建一个promise对象
        let promise =  Promise.resolve(config);
        //声明一个数组，保存promise的then方法的两个参数
        let chains = [dispatchRequest, undefined]; //undefined作用是占位
        //调用then方法，指定回调
        let result = promise.then(chains[0],chains[1]);
        //返回promise的结果
        return result;
    }
    //2、dispatchRequest函数
    function dispatchRequest(config){//该函数的返回结果必须是一个promise对象
        //调用适配器发送请求
        return xhrAdapter(config).then(response => {
            //省略对响应结果进行转换处理
            return response;
        },error=>{
            throw error;
        })
    }
    //3、adapter适配器
    function xhrAdapter(config){ //该函数的返回值也是promise
        return new Promise((resolve,reject)=>{
            //不考虑请求体的发送，创建一个异步请求
            let xhr = new XMLHttpRequest();
            xhr.open(config.method, config.url);
            xhr.send();
            //绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        resolve({
                            //自定义返回数据
                            config: config, //配置对象
                            data: xhr.response, //响应体
                            headers: xhr.getAllResponseHeaders(),
                            request: xhr,//请求对象
                            status: xhr.status,//响应状态码
                            statusText: xhr.statusText //响应状态字符串
                        })
                    } else {
                        reject(new Error('请求失败状态码为'+xhr.status))
                    }
                }
            }
        })

    }
    //测试创建axios函数
    let axios = Axios.prototype.request.bind(null)
    //用axios发送请求
    axios({
        method:'GET',
        url:'http://localhost:3000/posts'
    }).then(res=>{
        console.log(res)
    })