axios三部曲三极简核心造轮子

Posted 2022-02-27 Tony

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