Axios源码创建实例学习

最新推荐文章于 2022-07-28 22:14:22 发布

javscp_q

最新推荐文章于 2022-07-28 22:14:22 发布

阅读量160

点赞数 1

分类专栏：前端基础文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/javcp_q/article/details/118344023

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MyAxios</title>
  </head>
  <body>
    <script>
      // Axios构造函数
      function Axios(config) {
        // 请求配置
        this.defaults = config;
        // 拦截器
        this.interceptors = {
          request: new interceptorManager(),
          response: new interceptorManager()
        };
      }
      Axios.prototype.request = function(config) {
        console.log("发送请求，请求类型：" + config.method);
      };
      Axios.prototype.get = function(config) {
        return this.request({ ...config, method: "GET" });
      };
      Axios.prototype.post = function(config) {
        return this.request({ ...config, method: "POST" });
      };
      // 拦截器构造函数
      function interceptorManager() {}

      // 实际场景中axios对象既可以作为对象使用也可以作为函数使用
      function createInstance(config) {
        // 1.context对象可以调用方法，但自身不能作为函数使用
        let context = new Axios(config);
        // 2.instance函数是绑定了context对象的request方法，可作为函数使用，但自身不是对象，不能调用方法
        let instance = Axios.prototype.request.bind(context);
        // 3.遍历对象的属性和方法并复制到instance函数中，则instance函数既可以作为函数使用，也可以调用context对象的方法
        Object.keys(context).forEach(key => {
          instance[key] = context[key];
        });
        Object.keys(Axios.prototype).forEach(key => {
          instance[key] = Axios.prototype[key].bind(context);
        });
        return instance;
      }

      // 创建实际场景中使用的axios对象
      let axios = createInstance();
      // 作为函数使用
      axios({ method: "GET" });
      // 调用方法使用
      axios.request({ method: "POST" });
      axios.get();
      axios.post();
    </script>
  </body>
</html>