手写axios源码

清疚 2021-07-24 15:49 571阅读 0赞

axios发送请求大体流程:
    	axios是通过request方法来实现发送请求的
    	request方法内部又是通过调用dispatchRequest来实现最终请求的发送
    	dispatchRequest内部调用adapter适配器来确定是xhr发送(前端)还是http发送(node环境)
    	最终的结果使用Promise从后往前返回
    
    axios拦截器大体流程：
    	请求拦截器:将.use中的两个方法参数,unshift插入进执行的集合中进行保存
    	响应拦截器:将.use中的两个方法参数,push进执行的集合中进行保存
    	axios中是使用一个实例来管理集合
    	则最后会变成:[...,请求拦截方法1-1,请求拦截方法1-2,dispatchRequest,undefined,响应拦截方法1-1,响应拦截方法1-2,...]
    	执行时:遍历集合,将每对方法放进promise对象.then回调中,会根据方法的返回值返回对应的promise,返回的promise又作为下次.then之前的那个promise
    		即:while(chain.length){promise =primise.then(chain.shift(),chain.shift())}
    		每个请求拦截器返回的配置对象都会传递到下一个请求拦截器中,最终传递到dispatchRequest内
    		在执行完dispatchRequest后会得到数据请求结果，结果又会传递给下一个响应拦截器中,最后一个响应拦截器返回的数据结果就是最终axios返回的数据结果
    
    axios取消请求大体流程:
    	添加一个原型上的cancelToken类,cancelToken类中给实例绑定一个Promise对象,将该Promise对象的resolve执行器方法传递给axios.cancelToken传递的方法的形参上
    	此时外部可通过暴露出来的执行器控制cancelToken实例上的Promise对象的状态
    	在发送请求时,通过配置对象中的cancelToken属性获取到cancelToken实例上的Promise对象,如果执行了执行器,在.then的方法回调中进去xhr请求取消

**创建axios结构：**  
实现实例的defaults属性、intercepter拦截器、request、post、get请求结构

//创建Axios类
    function Axios(config) { 
      this.defaults = config; //添加defaults默认属性
      this.intercepters = {  //添加拦截器属性
        request:{ },
        response:{ }
      }
    }
    
    //添加实例方法
    Axios.prototype.request = function (config) {  //创建统一请求函数
      console.log('发送请求')
      return config;
    }
    Axios.prototype.get = function (config) { 
      return this.request({ method:"GET"});
    }
    Axios.prototype.post = function (config) { 
      return this.request({ method:"POST"});
    }
    
    //调用
    let axios = createInstance({  method: 'GET' });
    
    axios({   //相当于调用Axios.prototype.request方法
      method: "GET",
      url:"https://api.apiopen.top/getJoke"
    }).then(res => { 
      console.log(res);
    })

**创建返回axios实例的方法:**  
因为axios实例可以通过x()和x.get()等发送请求,而实例本身是不能x()调用,所以创建一个函数,实现实例上的属性和方法

//创建axios实例
    function createInstance(config) { 
      let context = new Axios(config);
    
      //创建请求函数,目的是能够直接x()发送请求,而返回的实例做不到
      let instance = Axios.prototype.request.bind(context); //若实例调用,则将方法中的this改变为实例
      //添加其他请求方法到instance函数上
      Object.keys(Axios.prototype).forEach(key => { 
        instance[key] = Axios.prototype[key].bind(context); //将this指向为实例
      })
    
      //为请求函数添加实例上的属性和方法
      Object.keys(context).forEach(key => { 
        instance[key] = context[key];
      })
    
      return instance;
    }

**实现发送请求:**  
1、通过Promise.resolve封装配置,返回结果为配置的Promise对象  
2、通过返回的Promise对象的成功.then回调,调用dispatchRequest函数,.then返回结果Promise状态值和dispatchRequest返回的Promise状态结果相同  
3、在dispatchRequest中调用适配器函数发送最终的网络请求,适配器函数返回Promise,dispatchRequest返回的Promise即为适配器函数执行器执行结果

//添加实例方法
    Axios.prototype.request = function (config) {  //创建统一请求函数
      //1、发送前合并defaults和传入的配置参数,此处省略
    
      //使用promise来处理配置参数,封装为promise类型
      let promise = Promise.resolve(config);
      
      //设置.then的两个回调函数
      let chains = [dispatchRequest, undefined]; //undefined占位,避免后续遍历调用报错,不能使用普通方法,因为此项是作为promise.then的第二个回调,普通方法会使得返回的promise状态为成功,导致最终的promise状态不准确
    
      //调用.then执行回调,并根据回调函数返回值获取.then的返回promise对象
      let res = promise.then(chains[0], chains[1]);
    
      //返回值对应实例返回的Promise对象即最终的数据结果
      return res;
    
    }
    
    //dispatchRequest函数搭建
    function dispatchRequest(config) { 
      //调用适配器发送请求
      return xhrAdaptor(config).then(res => {  //根据适配器函数的Promise执行器结果,设置.then的Promise的返回值
        return res;
      }, err => { 
        throw err;
      })
    }
    
    //adaptor适配器函数搭建,这里只实现xhr(前台)环境的情况
    function xhrAdaptor(config) { 
      return new Promise((resolve,reject) => { 
        //进行xhr请求,将结果使用执行器执行,则dispatchRequest返回的Promise内容就是执行器执行的内容,request中收到的Promise内容被dispatchRequest返回的Promise内容决定
        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,
                data: xhr.response,
                header:xhr.getAllResponseHeaders(), //这里是字符串,axios内部对其进行了格式化变成了对象
                status: xhr.status,
                request:xhr, //xhr请求对象
                statusText:xhr.statusText
              })
            } else { 
              reject(new Error('请求失败'+xhr.status))
            }
          }
        
        }
      })
    }
    
    ...
    //调用
    axios({   //相当于调用Axios.prototype.request方法
      method: "GET",
      url:"https://api.apiopen.top/getJoke"
    }).then(res => { 
      console.log(res);
    })

**实现拦截器:**

保存.use中参数方法,axios使用一个实例来管理
    1、请求拦截器:将.use中的两个方法参数,unshift插入进执行的集合中进行保存
    2、响应拦截器:将.use中的两个方法参数,push进执行的集合中进行保存
    3、则最后会变成:[...,请求拦截方法1-1,请求拦截方法1-2,dispatchRequest,undefined,响应拦截方法1-1,响应拦截方法1-2,...]
    4、执行时:遍历集合,将每对方法放进promise对象.then回调中,会根据方法的返回值返回对应的promise,返回的promise又作为下次.then之前的那个promise
    	即:while(chain.length){promise =primise.then(chain.shift(),chain.shift())}
    	每个请求拦截器返回的配置对象都会传递到下一个请求拦截器中,最终传递到dispatchRequest内
    	在执行完dispatchRequest后会得到数据请求结果，结果又会传递给下一个响应拦截器中,最后一个响应拦截器返回的数据结果就是最终axios返回的数据结果

//创建Axios类
    function Axios(config) { 
      this.defaults = config; //添加defaults默认属性
      this.interceptors = {  //添加拦截器属性
        request:new InterceptorManager(), //添加管理存储拦截器中方法的实例
        response:new InterceptorManager()
      }
    }
    
    
    //拦截器管理类
    function InterceptorManager() { 
      this.handlers = [];
    }
    
    InterceptorManager.prototype.use = function (fullfilled, rejected) { 
      this.handlers.push({ 
        fullfilled,
        rejected
      })
    }
    
    //添加实例方法
    Axios.prototype.request = function (config) {  //创建统一请求函数
      //1、发送前合并defaults和传入的配置参数,此处省略
    
      //使用promise来处理配置参数,封装为promise类型
      let promise = Promise.resolve(config);
      
      //设置.then的两个回调函数
      let chains = [dispatchRequest, undefined]; //undefined占位,避免后续遍历调用报错,不能使用普通方法,因为此项是作为promise.then的第二个回调,普通方法会使得返回的promise状态为成功,导致最终的promise状态不准确
    
      //处理拦截器,因为创建实例时已经将this指向了axios实例,所以能够获取到axios实例上存储的拦截器方法
        //请求拦截器
      this.interceptors.request.handlers.forEach((item) => { 
        chains.unshift(item.rejected);  //注意压入顺序,先压入失败回调,再压入成功,使得shift()先取出成功回调
        chains.unshift(item.fullfilled);
        
      })
        //响应拦截器
      this.interceptors.response.handlers.forEach((item) => { 
        chains.push(item.fullfilled);
        chains.push(item.rejected);
      })
      
    
      while (chains.length) {  //遍历存储的方法,执行请求拦截器->发送请求方法dispatchRequest->响应拦截器
        //请求拦截器中的方法会根据返回参数,使用promise成功回调,将每次修改后的配置传递到dispatchRequest中
        //响应拦截器会根据dispatchRequest返回的请求数据,将数据传递给之后的响应拦截器中
        //若中途产生了失败回调,会异常穿透到最后一个promise中
        //最终返回带有结果的promise
        promise = promise.then(chains.shift(), chains.shift()); //shift弹出数组第一个元素,并改变数组结构
      }
      
      //返回值对应实例返回的Promise对象即最终的数据结果
      return promise;
    
    }

**实现请求取消:**  
1、添加一个原型上的cancelToken类,cancelToken类中给实例绑定一个Promise对象,将该Promise对象的resolve执行器方法传递给axios.cancelToken传递的方法的形参上  
2、此时外部可通过暴露出来的执行器控制cancelToken实例上的Promise对象的状态  
3、在发送请求时,通过配置对象中的cancelToken属性获取到cancelToken实例上的Promise对象,如果执行了执行器,在.then的方法回调中进去xhr请求取消

//创建取消axios请求类
    Axios.prototype.cancelToken = function (executor) { 
      
      let resolvePromise; //声明该属性上的promise执行器 
    
      //为当前cancelToken类添加属性
      this.promise = new Promise((resolve) => { 
        resolvePromise = resolve; //赋值执行器
      })
    
      executor(function () { //将执行器传递给cancelToken实例的方法,当方法调用执行器后,会改变cancelToken实例上的Promise的状态,在xhr发送请求时判断axios实例上的cancelToken实例上的Promise状态,从而来取消请求
        resolvePromise();
      });
    }
    
    //adaptor适配器函数搭建,这里只实现xhr(前台)环境的情况
    function xhrAdaptor(config) { 
      return new Promise((resolve,reject) => { 
        //进行xhr请求,将结果使用执行器执行,则dispatchRequest返回的Promise内容就是执行器执行的内容,request中收到的Promise内容被dispatchRequest返回的Promise内容决定
        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,
                data: xhr.response,
                header:xhr.getAllResponseHeaders(), //这里是字符串,axios内部对其进行了格式化变成了对象
                status: xhr.status,
                request:xhr, //xhr请求对象
                statusText:xhr.statusText
              })
            } else { 
              reject('请求失败'+xhr.status)
            }
          }
    
          //取消请求
          if (config.cancelToken) {  //如果配置了cancelToken属性
            config.cancelToken.promise.then((cancelInfo) => {  //当调用了cancelToken实例上的Promise的执行器时,才会执行.then的方法参数,在其中进行取消xhr请求
              xhr.abort();
              reject('请求取消');
            })
          }
        
        }
      })
    }
    
    let token;
    
    axios({   //相当于调用Axios.prototype.request方法
      method: "GET",
      url: " http://localhost:3001/posts",
      cancelToken: new axios.cancelToken(function (c) { 
        token = c;
      })
    }).then(res => { 
      console.log(res);
    })
    
    token();

**总体代码实现示例:**

// import axios from 'axios';
    
    //创建Axios类
    function Axios(config) { 
      this.defaults = config; //添加defaults默认属性
      this.interceptors = {  //添加拦截器属性
        request:new InterceptorManager(), //添加管理存储拦截器中方法的实例
        response:new InterceptorManager()
      }
    }
    
    
    //拦截器管理类
    function InterceptorManager() { 
      this.handlers = [];
    }
    
    InterceptorManager.prototype.use = function (fullfilled, rejected) { 
      this.handlers.push({ 
        fullfilled,
        rejected
      })
    }
    
    //添加实例方法
    Axios.prototype.request = function (config) {  //创建统一请求函数
      //1、发送前合并defaults和传入的配置参数,此处省略
    
      //使用promise来处理配置参数,封装为promise类型
      let promise = Promise.resolve(config);
      
      //设置.then的两个回调函数
      let chains = [dispatchRequest, undefined]; //undefined占位,避免原型链调用出错
    
      //处理拦截器,因为创建实例时已经将this指向了axios实例,所以能够获取到axios实例上存储的拦截器方法
        //请求拦截器
      this.interceptors.request.handlers.forEach((item) => { 
        chains.unshift(item.rejected);  //注意压入顺序,先压入失败回调,再压入成功,使得shift()先取出成功回调
        chains.unshift(item.fullfilled);
        
      })
        //响应拦截器
      this.interceptors.response.handlers.forEach((item) => { 
        chains.push(item.fullfilled);
        chains.push(item.rejected);
      })
      
    
      while (chains.length) {  //遍历存储的方法,执行请求拦截器->发送请求方法dispatchRequest->响应拦截器
        //请求拦截器中的方法会根据返回参数,使用promise成功回调,将每次修改后的配置传递到dispatchRequest中
        //响应拦截器会根据dispatchRequest返回的请求数据,将数据传递给之后的响应拦截器中
        //若中途产生了失败回调,会异常穿透到最后一个promise中
        //最终返回带有结果的promise
        promise = promise.then(chains.shift(), chains.shift()); //shift弹出数组第一个元素,并改变数组结构
      }
      
      //返回值对应实例返回的Promise对象即最终的数据结果
      return promise;
    
    }
    
    //dispatchRequest函数搭建
    function dispatchRequest(config) { 
      //调用适配器发送请求
      return xhrAdaptor(config).then(res => {  //根据适配器函数的Promise执行器结果,设置.then的Promise的返回值
        return res;
      }, err => { 
        
        throw err;
      })
    }
    
    //adaptor适配器函数搭建,这里只实现xhr(前台)环境的情况
    function xhrAdaptor(config) { 
      return new Promise((resolve,reject) => { 
        //进行xhr请求,将结果使用执行器执行,则dispatchRequest返回的Promise内容就是执行器执行的内容,request中收到的Promise内容被dispatchRequest返回的Promise内容决定
        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,
                data: xhr.response,
                header:xhr.getAllResponseHeaders(), //这里是字符串,axios内部对其进行了格式化变成了对象
                status: xhr.status,
                request:xhr, //xhr请求对象
                statusText:xhr.statusText
              })
            } else { 
              reject('请求失败'+xhr.status)
            }
          }
    
          //取消请求
          if (config.cancelToken) {  //如果配置了cancelToken属性
            config.cancelToken.promise.then((cancelInfo) => {  //当调用了cancelToken实例上的Promise的执行器时,才会执行.then的方法参数,在其中进行取消xhr请求
              xhr.abort();
              reject('请求取消');
            })
          }
        
        }
      })
    }
    
    Axios.prototype.get = function (config) { 
      return this.request({ method:"GET"});
    }
    Axios.prototype.post = function (config) { 
      return this.request({ method:"POST"});
    }
    
    //创建取消axios请求类
    Axios.prototype.cancelToken = function (executor) { 
      
      let resolvePromise; //声明该属性上的promise执行器 
    
      //为当前cancelToken类添加属性
      this.promise = new Promise((resolve) => { 
        resolvePromise = resolve; //赋值执行器
      })
    
      executor(function () { //将执行器传递给cancelToken实例的方法,当方法调用执行器后,会改变cancelToken实例上的Promise的状态,在xhr发送请求时判断axios实例上的cancelToken实例上的Promise状态,从而来取消请求
        resolvePromise();
      }); 
    
    
    }
    
    //创建axios实例
    function createInstance(config) { 
      let context = new Axios(config);
    
      //创建请求函数,目的是能够直接x()发送请求,而返回的实例做不到
      let instance = Axios.prototype.request.bind(context); //若实例调用,则将方法中的this改变为实例
      //添加其他请求方法到instance函数上
      Object.keys(Axios.prototype).forEach(key => { 
        instance[key] = Axios.prototype[key].bind(context); //将this指向为实例
      })
    
      //为请求函数添加实例上的属性和方法
      Object.keys(context).forEach(key => { 
        instance[key] = context[key];
      })
    
      return instance;
    }
    
    
    
    
    let axios = createInstance({  method: 'GET' });
    
    
    //拦截器调用
    axios.interceptors.request.use(function (config) { 
      console.log('req1')
      return config
    }, function (err) { 
      return Promise.reject(err);
    })
    
    axios.interceptors.request.use(function (config) { 
      console.log('req2')
      return config
    }, function (err) { 
      console.log('err');
      return Promise.reject(err);
    })
    
    axios.interceptors.response.use(function (data) { 
      console.log('resp1')
      return data;
    }, function (err) { 
      return Promise.reject(err);
    })
    
    axios.interceptors.response.use(function (data) { 
      console.log('resp2')
      return data;
    }, function (err) { 
      return Promise.reject(err);
    })
    
    console.dir(axios);
    
    let token;
    
    axios({   //相当于调用Axios.prototype.request方法
      method: "GET",
      url: " http://localhost:3001/posts",
      cancelToken: new axios.cancelToken(function (c) { 
        token = c;
      })
    }).then(res => { 
      console.log(res);
    })
    
    token();