【axios三部曲】三、极简核心造轮子

axios执行流程

目录结构

如果要一个极简核心的话，我们只需要 request 请求函数，和一个 XMLHttpRequest 即可，拦截器，适配器 dispatchRquest 都可以不要

Axios构造函数

我们从Axios构造函数开始写
core/Axios.js

import utils from "../utils";
import mergeConfig from "./mergeConfig";
import xhr from "./xhr";

// 核心文件

function Axios(config) {
  this.defaults = config;
}

Axios.prototype.request = function (config) {
  // 处理axios(url[,config])
  if (typeof config === "string") {
    config = arguments[1] || {};
    config.url = arguments[0];
  } else {
    config = config || {};
  }

  // 合并config
  config = mergeConfig(this.defaults, config);

  console.log(config);

  // 设置默认method
  if (config.method) {
    config.method = config.method.toLowerCase();
  } else if (this.defaults.method) {
    config.method = this.defaults.method.toLowerCase();
  } else {
    config.method = "get";
  }

  let promise = Promise.resolve(config);
  promise = promise.then(xhr);

  return promise;
};

utils.forEach(["delete", "get", "head", "options"], function (method) {
  Axios.prototype[method] = function (url, config) {
    return this.request(
      utils.merge(config || {}, {
        method: method,
        url: url,
      })
    );
  };
});

utils.forEach(["post", "put", "patch"], function (method) {
  Axios.prototype[method] = function (url, data, config) {
    return this.request(
      utils.merge(config || {}, {
        method: method,
        url: url,
        data: data,
      })
    );
  };
});

export default Axios;

只有一个最简单request方法
​

mergeConfig

core/mergeConfig.js
也没有做过多的判断，只是优先把config2的值拷贝到config上，其次再使用config1的值

import utils from "../utils";

// 合并两个配置对象，返回一个新的对象
function mergeConfig(config1, config2) {
  let config = {};

  let axiosKeys = Array.from(
    new Set(Object.keys(config1).concat(Object.keys(config2)))
  );

  // 优先使用config2身上的
  utils.forEach(axiosKeys, function (prop) {
    if (utils.isObject(config2[prop])) {
      config[prop] = utils.merge(config1[prop], config2[prop]);
    } else if (typeof config2[prop] !== "undefined") {
      config[prop] = config2[prop];
    } else if (utils.isObject(config1[prop])) {
      config[prop] = utils.merge(config1[prop]);
    } else if (typeof config1[prop] !== "undefined") {
      config[prop] = config1[prop];
    }
  });

  return config;
}

export default mergeConfig;

xhr

core/xhr.js
一个简单的XMLHttpRequest

// XMLHttpRequest

// 返回一个promise
const xhr = function (config) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();

    xhr.open(config.method, config.url);
    xhr.send(config.data);

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 返回response数据，自定义格式
          resolve({
            config: config,
            data: JSON.parse(xhr.responseText),
            request: xhr,
            headers: xhr.getAllResponseHeaders(),
            status: xhr.status,
            statusText: xhr.statusText,
          });
        } else {
          reject("数据请求错误:" + xhr.statusText);
        }
      }
    };
  });
};

export default xhr;

utils

utils.js
一些工具函数

function forEach(obj, fn) {
  if (obj === null || typeof obj === "undefined") {
    return;
  }

  if (typeof obj !== "object") {
    obj = [obj];
  }

  if (Array.isArray(obj)) {
    for (let i = 0; i < obj.length; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    for (let key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        fn.call(null, obj[key], key, obj);
      }
    }
  }
}

function bind(fn, thisArg) {
  // 这里用fn.apply来实现函数this绑定，注意需要返回的也是一个函数，所以这里包一层
  return function wrap() {
    // 把多个参数，转成数组的形式
    let args = new Array(arguments.length);
    for (let i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }

    // args是一个数组，apply调用方式
    return fn.apply(thisArg, args);
  };
}

// 实现继承，b->a 如果是函数要绑定this指向
function extend(a, b, thisArg) {
  forEach(b, function (val, key) {
    if (thisArg && typeof val === "function") {
      a[key] = bind(val, thisArg);
    } else {
      a[key] = val;
    }
  });
  return a;
}

// 合并对象，返回一个新的对象
function merge() {
  let result = {};

  function assignValue(val, key) {
    // result里的是一个对象，并且val也是一个对象，深拷贝
    if (typeof result[key] === "object" && typeof val === "object") {
      result[key] = merge(result[key], val);
    } else if (typeof result[key] === "object") {
      result[key] = merge({}, val);
    } else {
      result[key] = val;
    }
  }

  // 有多个参数要合并，依次循环遍历，合并到result
  for (let i = 0; i < arguments.length; i++) {
    forEach(arguments[i], assignValue);
  }

  return result;
}

function isObject(val) {
  return val !== null && typeof val === "object";
}

export default {
  forEach,
  bind,
  extend,
  merge,
  isObject,
};

defaults

defaults.js
默认的头配置文件

let defaults = {
  method: "get",
};

export default defaults;

axios入口文件

// 入口文件
import Axios from "./core/Axios";
import utils from "./utils";
import mergeConfig from "./core/mergeConfig";
import defaults from "./defaults";

function createInstance(defaultConfig) {
  let context = new Axios(defaultConfig);
  let instance = utils.bind(Axios.prototype.request, context);

  // extend prototype
  utils.extend(instance, Axios.prototype, context);
  // extend Axios属性
  utils.extend(instance, context);

  instance.create = function (newConfig) {
    return createInstance(mergeConfig(defaultConfig, newConfig));
  };

  return instance;
}

let axios = createInstance(defaults);

console.dir(axios);

// console.log(axios);

// axios({
//   url: "http://localhost:3000/posts",
//   method: "get",
// }).then((response) => {
//   console.log(response);
// });

axios
  .get("http://localhost:3000/posts", {
    headers: {
      common: 111,
    },
  })
  .then((response) => {
    console.log(response);
  });

总结

• promise的使用
• utils里面的工具函数比较实用，要注意的是forEach，bind，extend，merge这几个函数
• 构造函数 + prototype的方式来组织代码，现在已经有更好的选择 class
• axios库的核心就是axios是一个函数(request)，它身上也挂有方法（get,post)，我们可以学习这种编程方法
• axios的config参数合并也是重点，有优先级，默认的最低，最后方法传入的最高

源码地址

• webpack-axios