axios 源码笔记（四）

最新推荐文章于 2024-05-11 13:14:25 发布
最新推荐文章于 2024-05-11 13:14:25 发布
阅读量451 收藏
点赞数
分类专栏： 源码笔记 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/by13161761799/article/details/109122059
版权

axios 源码解析

lib/core

Axios.js

  1. axios 实例，接收自定义或者默认的config，并且设置了拦截器属性，分别定义了request和response的拦截器
function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}
  1. 设置原型方法，使每个实例都是得到
Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  // 第一个值为string，说明应该是url
  if (typeof config === 'string') {
    config = arguments[1] || {};
    config.url = arguments[0];
  } else {
    config = config || {};
  }
  // 合并自定义config和默认值
  config = mergeConfig(this.defaults, config);

  // Set 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';
  }

  // Hook up interceptors middleware
  // 这里维护了一个调用栈，中间为dispatchRequest，和undefined
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  // 遍历request拦截器，将每个拦截器的resolve，reject添加在调用栈chain的前面
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
  
  // 遍历response拦截器，将每个拦截器的resolve，reject添加在调用栈chain的前面
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  // 遍历调用栈，成双成的给promise增加then，每个then添加resolve和reject方法
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  // 最终返回的promise上，前面是request拦截器，中间是请求，后面是response拦截器
  return promise;
};
  1. 合并自定义config和默认config，并且返回拼接好params和query的url
Axios.prototype.getUri = function getUri(config) {
  config = mergeConfig(this.defaults, config);
  return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
};
  1. 分别给Axios添加原型方法，并处理data
// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

buildFullPath.js

module.exports = function buildFullPath(baseURL, requestedURL) {
  if (baseURL && !isAbsoluteURL(requestedURL)) {
    return combineURLs(baseURL, requestedURL);
  }
  return requestedURL;
};

如果存在baseUrl并且是相对路径，返回拼接好的url，否则返回原始url

createError.js

封装了error，使返回的error统一化

module.exports = function createError(message, config, code, request, response) {
  var error = new Error(message);
  return enhanceError(error, config, code, request, response);
};

dispatchRequest.js

/**
 * Throws a `Cancel` if cancellation has been requested.
 */
function throwIfCancellationRequested(config) {
  if (config.cancelToken) {
    config.cancelToken.throwIfRequested();
  }
}

/**
 * Dispatch a request to the server using the configured adapter.
 *
 * @param {object} config The config that is to be used for the request
 * @returns {Promise} The Promise to be fulfilled
 */
module.exports = function dispatchRequest(config) {
  throwIfCancellationRequested(config);

  // Ensure headers exist
  config.headers = config.headers || {};

  // Transform request data
  config.data = transformData(
    config.data,
    config.headers,
    config.transformRequest
  );

  // Flatten headers
  config.headers = utils.merge(
    config.headers.common || {},
    config.headers[config.method] || {},
    config.headers
  );

  utils.forEach(
    ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
    function cleanHeaderConfig(method) {
      delete config.headers[method];
    }
  );

  var adapter = config.adapter || defaults.adapter;

  return adapter(config).then(function onAdapterResolution(response) {
    throwIfCancellationRequested(config);

    // Transform response data
    response.data = transformData(
      response.data,
      response.headers,
      config.transformResponse
    );

    return response;
  }, function onAdapterRejection(reason) {
    if (!isCancel(reason)) {
      throwIfCancellationRequested(config);

      // Transform response data
      if (reason && reason.response) {
        reason.response.data = transformData(
          reason.response.data,
          reason.response.headers,
          config.transformResponse
        );
      }
    }

    return Promise.reject(reason);
  });
};
  1. 当用户定义cancelToken时，会把cancel方法抛给用户，当用户触发cancel时，会通过new cancel生成reason，如果存在reason，直接throw。
  2. transformRequest，这块处理data和header，需要用户自定义方法，在请求发送之前处理data和header
  3. 处理header，将三部分header合并，第一，可以设置全局默认的header，也就是header.common，第二，每个method都设置了对应的content-type等参数，此时找到设置的config,method对应的header，第三用户设置的header
  4. 在上一步找到method对应的header，因此删除不必要的header.method
  5. 返回一个promise，调用adapter，成功和失败，都会组装resposeData，同样支持传入transformResponse来修改返回的data，成功直接返回response，失败reject

InterceptorManager

function InterceptorManager() {
  this.handlers = [];
}

// 首先将拦截器的成功和失败，push到handlers，此时会返回当前拦截器的id，方便后面删除
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};

// 删除对应的拦截器，这块没有直接删除拦截器，只是把对应的拦截器id设置为空，是为了防止拦截器的id发生变化
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
    this.handlers[id] = null;
  }
};

// 遍历拦截器数组，执行传入的方法，这里对应上面的chain执行栈，按顺序插入chain，最终会将request和response各种拦截器按顺序执行
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
    if (h !== null) {
      fn(h);
    }
  });
};

module.exports = InterceptorManager;

mergeConfig

module.exports = function mergeConfig(config1, config2) {
  // eslint-disable-next-line no-param-reassign
  config2 = config2 || {};
  var config = {};

  var valueFromConfig2Keys = ['url', 'method', 'data'];
  var mergeDeepPropertiesKeys = ['headers', 'auth', 'proxy', 'params'];
  var defaultToConfig2Keys = [
    'baseURL', 'transformRequest', 'transformResponse', 'paramsSerializer',
    'timeout', 'timeoutMessage', 'withCredentials', 'adapter', 'responseType', 'xsrfCookieName',
    'xsrfHeaderName', 'onUploadProgress', 'onDownloadProgress', 'decompress',
    'maxContentLength', 'maxBodyLength', 'maxRedirects', 'transport', 'httpAgent',
    'httpsAgent', 'cancelToken', 'socketPath', 'responseEncoding'
  ];
  var directMergeKeys = ['validateStatus'];

  function getMergedValue(target, source) {
  	// 判断是否为纯粹的对象，首先会验证[object Object]，其次验证prototype是否为Object本身的prototype
  	// source为config2，如果两个都为存粹对象，那么合并
  	// utils 通过递归实现了深拷贝
  	// 深浅拷贝区别：浅拷贝只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一块内存
  	// 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象
    if (utils.isPlainObject(target) && utils.isPlainObject(source)) {
      return utils.merge(target, source);
    } else if (utils.isPlainObject(source)) {
      return utils.merge({}, source);
    } else if (utils.isArray(source)) {
   	  // 浅复制了原数组中的元素的一个新数组
      return source.slice();
    }
    return source;
  }

  // 此处getMergedValue和上面的区别是，上面不关注config1的属性，只要config2有就复制，mergeDeepProperties则是若不存在config2，会复制config1
  function mergeDeepProperties(prop) {
    if (!utils.isUndefined(config2[prop])) {
      config[prop] = getMergedValue(config1[prop], config2[prop]);
    } else if (!utils.isUndefined(config1[prop])) {
      config[prop] = getMergedValue(undefined, config1[prop]);
    }
  }

  utils.forEach(valueFromConfig2Keys, function valueFromConfig2(prop) {
    if (!utils.isUndefined(config2[prop])) {
      config[prop] = getMergedValue(undefined, config2[prop]);
    }
  });

  utils.forEach(mergeDeepPropertiesKeys, mergeDeepProperties);

  utils.forEach(defaultToConfig2Keys, function defaultToConfig2(prop) {
    if (!utils.isUndefined(config2[prop])) {
      config[prop] = getMergedValue(undefined, config2[prop]);
    } else if (!utils.isUndefined(config1[prop])) {
      config[prop] = getMergedValue(undefined, config1[prop]);
    }
  });
  // 这里使用in，只要对象上包含该key，就返回true（自身属性和prototype上）
  // hasOwnProperty 对象自身属性上包含则返回true
  // 判断对象那些属性为原型中的属性，!Object.hasOwnProperty && in
  utils.forEach(directMergeKeys, function merge(prop) {
    if (prop in config2) {
      config[prop] = getMergedValue(config1[prop], config2[prop]);
    } else if (prop in config1) {
      config[prop] = getMergedValue(undefined, config1[prop]);
    }
  });

  var axiosKeys = valueFromConfig2Keys
    .concat(mergeDeepPropertiesKeys)
    .concat(defaultToConfig2Keys)
    .concat(directMergeKeys);

  var otherKeys = Object
    .keys(config1)
    .concat(Object.keys(config2))
    .filter(function filterAxiosKeys(key) {
      return axiosKeys.indexOf(key) === -1;
    });

  utils.forEach(otherKeys, mergeDeepProperties);

  return config;
};
  1. 合并用户自定义的参数：url，method，data，如果config2中不是undefined，则使用config2的内容，这些多数为必传字段，因此以config2为主
  2. 合并mergeDeepPropertiesKeys，这些参数都是可选，因此如果用户没有手动设置，取默认值，也就是为什么要判断是否存在config1[props]，如果存在config2，同时会合并config1和config2
  3. 合并defaultToConfig2Keys，这些参数是可选的，是axios已有默认值的配置项，和上面参数的区别在于这一类参数用于控制请求过程，包括变量和函数，这些是可选的，如果用户设置，以用户设置为主，否则采用默认的参数
  4. 处理剩余的字段，剔除axiosKey中包含的，复制剩余的字段

transformData

module.exports = function transformData(data, headers, fns) {
  /*eslint no-param-reassign:0*/
  utils.forEach(fns, function transform(fn) {
    data = fn(data, headers);
  });

  return data;
};

fns可以是一个函数也可以是一个函数数组，data和headers将执行每个传入的fn

baiyu666
关注
专栏目录
axios介绍---axios工作笔记001
添柴程序猿的专栏
02-20 329
我们来学习axios,这个是封装了http请求的,很好用的一个东西.可以看到网址 然后我们要学的东西有,使用方法 以及源码分析,以及我们要仿写一个axios出来. 需要的前置知识,这里需要promise的知识 还有ajax的知识 我们知道这个promise是es6中,提出的一种, 是针对异步编程,提出的一个新的解决方案 后面我们说源码的时候,源码中,是有写中文注释的.用来帮助理解. 然后说源码的时候会说百分之20的,重点部分,忽略,不是特别重要的百分之80. ...
vue+spring-security前后端分离登录实现
qq_32940011的博客
03-28 856
知乎上看到一条评价很有意思：mybatis-plus就仿佛，你开着一辆名叫mybatis的手动挡汽车，然后请了一个叫mybatis-plus的人坐在副驾驶帮你挂档。既然如此为什么不从一开始直接开手动挡车呢？他不香吗？主要是我不会用，也不想学。。配置太复杂。
Vue错误记录（三）文件上传之transformRequest配置导致其他接口错误
qq_40286424的博客
01-12 2531
场景：在 Vue项目的man.js中封装了文件上传接口，配置transformRequest后导致其他请求接口出错。 原因： 配置transformRequest后请求数据是FormData格式，其他请求接口发送数据到后台无法解析。 解决方法：调用接口时，配置transformRequest相应的数据格式。 man.js中的接口配置 // 默认配置 import qs from 'qs'; import axios from 'axios' axios.defaults.withCredentials =
axios中的transformRequest和transformResponse使用
最新发布
qq_49017797的博客
05-11 524
允许你的请求数据在发送到服务器之前进行修改，只适合put、post、patch请求方法，后面数组中的函数必须返回一个字符串或ArrayBuffer或Stream。transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data;当值为数组的时候，数组的每一个函数都是一个转换函数，数组中的函数就像管道一样依次执行，前者的输出作为后者的输入。案例：如果查询接口时，发现请求成功，但是没有返回值的情况下，可以通过如下方法解决。
axios配置中transformRequest和transformResponse的作用
热门推荐
weixin_55894946的博客
05-26 3万+
transformRequest： 作用：标识允许向服务器发送请求前发送数据； 使用要求：只能用在put，post，patch这几个方法；后面数组中的函数，必须返回字符串，或 ArrayBuffer，或 Stream。 用法： transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data; }], 使用场景：对post请求的data数据进行加密处理 transformResp
Axios
wyh666csdn的博客
08-14 620
Axios的基本使用 get，获取数据 post，提交数据（表单提交以及文件上传） put，更新数据 （提交所有的数据） patch，提交数据 （提交修改的数据） delete，删除数据 axios({ method: 'get', url: '', params: {} }).then(res => { do something }) 并发请求 同时进行多个请求，并统一处理返回值，如果在某些场景中我们需要同时依赖两个接口返回的数据，那么我们可以使用并发请求。 axios.a
HTTP 强缓存和协商缓存
风萧萧兮易水寒
09-25 2211
对于客户端来说，HTTP缓存是web性能优化的重要手段。 优势： 减少了冗余的数据传递，节省宽带流量 减少了服务器的负担，大大提高了网站性能 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。 用户体验好 缺点： 缓存中的数据可能与服务器的数据不一致 消耗内存 浏览器缓存一般是针对静态资源（js/css/img等），我们将缓存分为强缓存和协商缓存，两者的主要区别是...
Axios 源码解析-完整篇
m0_67619362的博客
05-05 1546
// 举个例子，类似：axios.get(url, {}) > axios.create(url, {}) > 内部默认设置 config = mergeConfig(this.defaults, config); // 拦截器（请求和响应） var requestInterceptorChain = [{ fulfilled: interceptor.request.fulf
尚硅谷axios笔记——入门学习
weixin_53317758的博客
11-26 1262
取消请求，axios的基本使用、拦截器、axios.get、axios.post、设置请求体等等
axios笔记
hyhlsy的博客
09-02 153
目录axios是什么axios特征json-server安装axios安装axios使用axios外链接配置axios基本使用axios的其他使用axios默认配置axios创建实例对象axios拦截器axios取消请求axios源码分析与模拟axios对象创建axios发送请求模拟axios拦截器模拟axios取消请求总结axios与Axios的关系instance与axios的异同axios的整体运行流程拦截器是什么请求/响应数据转换器是什么response的整体结构如何取消未完成的请求axios的整体
尚硅谷 Ajax与Axios的使用与关键源码 笔记
LiuKairui的博客
06-16 810
文章目录Ajax概述原生Ajax尝试请求的发送与请求头配置JSON支持IE缓存问题请求的取消与重发jQuery的Ajax使用Axios发送Ajax[简易]使用fetch发送请求Ajax跨域JSONP解决跨域问题CORS解决跨域问题Axios的理解与使用JSON Server的使用Axios基本使用拦截器取消请求Axios源码分析目录结构实现axios,使得既可以axios()也可以axios.xx()Axios类的实现手写一个简易版的axios请求发送函数请求取消函数总结(八股) Ajax概述 Ajax简介
axios-使用
神zhi殇的博客
01-04 404
文章目录
axios（非常全面）
my的博客
04-05 3022
项目中涉及到的多个请求的配置很多都是相同的，如get请求，其他配置可能都相同，只有url不同。那相同部分代码就会造成冗余，通过二次封装，可以实现接口代码复用。疑问：axios本身就是promise，为什么在进行封装请求方法的时候还要在外面加一层promise。后端：中间件/服务端进行跨域相关配置，在项目中新建允许跨域配置类。先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去。这里主要介绍前端的跨域解决方案,都是做配置项，实现代理转发。一些具体的业务，需要携带一些参数。在本地调试的时候，还需要在。
axios 发 post 请求，后端接收不到参数的解决方案
song854601134的博客
03-17 1万+
项目总结： axios 发 post 请求，后端接收不到参数的解决方案 问题场景 axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd } }) 后台说没有接收到你的传参。 这就有点奇怪了，我看了一下浏览器的
axios使用总结（一）
smaller_coder的博客
05-29 1294
1、baseURL、timeout axios.create({ baseURL:'', timeout:500 // 链接超时 当发送时间超过1秒就不再发送了 }) 2、transformRequest 在发送到服务器前，对参数进行拦截、修改请求数据 axios.create({ baseURL:'', transformRequest: [function (data) { // `transformRequest` 允许在向服务器发送前，修
React Hooks 钩子函数错误用法，你还在犯这些错误吗
qq_43205326的博客
04-26 871
react hooks 常见错误总结
拦截
beihui1976的博客
07-25 192
拦截让人想到1、axios的请求、响应拦截器//添加请求拦截器axios.interceptors.request.use(function(config){ //在发送请求之前做些什么 returnconfig; },function(error){ //对请求错误做些什么 returnPromise.reject(e...
王云飞给小菜鸡儿的Axios详解教程
u010544438的博客
09-27 301
Axios Axios是什么？ Axios 是一个基于 promise 的 HTTP 库。 特性 支持node端和浏览器端 支持promise 丰富的配置项 headers transformRequest transformResponse baseURL 拦截器 … 提供了一些并发请求的方法 社区庞大，增长速度快 基本用法 axios({ method: 'post', ...
10分钟搞懂 Vite devServer，速来围观！
Yvette Lau的专栏
05-27 8596
梁晓莹，微医前端技术部前端开发工程师，一只喜欢游泳&&读书的猪猪女孩。分析 version：2.2.3，和我来一场 vite server 探寻之旅吧~(❦ω❦)一、初始 ...
vue3 axios源码
01-18
vue3 axios源码是指Vue.js 3版本中与axios相关的源代码。在Vue.js 3中，axios是一个常用的HTTP客户端库，用于在浏览器和Node.js中发起HTTP请求。它提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值