theme: cyanosis
highlight: atelier-dune-light
我正在参与掘金会员专属活动-源码共读第一期，点击参与
前言
第一遍看 axios 源码，更多的是带着日常开发的习惯，时不时产生出点联想。
第二遍再看 axios 源码，目标明确，就是奔着函数来的。
当有了明确清晰的目标，阅读速度上来了，思绪也转的飞快。
按图索骥，接下来，将和大家一起，找寻 axios 源码中的功能函数，扩展一下开发思路。
文章速读
阅读文章，可以有以下收获：
功能函数
一般基础的工具函数都会放到 utils.js 文件中。前一篇源码阅读中，介绍了关于类型判断的两种方法。
axios 中有许多模块，不同的模块下包含不同的功能。除了 utils.js 文件，这些模块下的文件也包含函数。我称之为功能函数。
功能函数，按照实际功能需要封装的函数，也许并不是常见功能需要的，但是了解之后，没准能帮助今后用到的时候，快速完成开发。
1.standardBrowserEnv 标准浏览器中对 cookie 的读写删操作
axios 拥有对 cookie 操作的能力，就像叶一一会讲故事一样理所当然。
看源码功能之前，我们先来复习关于 cookie 的知识点。
cookie 的格式
通过 document.cookie 获取 cookie 的值，是一串有特定格式的字符串。它的格式是
cookie1=value; cookie2=value; cookie3=value;
了解了 cookie 的格式，对于它的操作，也自然而然的可以接着看代码了。
cookie 的读写删
在标准浏览器中，对 cookie 的处理被封装在了一个立即执行函数里。
(function standardBrowserEnv() {
return {
/**
* cookie 写入（创建）单个写入
* @param {string} name cookie 名
* @param {string} value cookie 值
* @param {*} expires 过期时间
* @param {*} path cookie所在的目录
* @param {*} domain cookie所在的域
* @param {*} secure 是否可以通过HTTP协议的URL设置布尔值 值为 true 时，表示创建的 cookie 只能用 HTTPS 协议发送
*/
write: function write(name, value, expires, path, domain, secure) {
// 先将所有的数据存入数组
const cookie = [];
cookie.push(name + '=' + encodeURIComponent(value));
// 如果过期时间有值且是数值型，则存入其转为根据格林威治时间 (GMT) 转成的字符串
if (utils.isNumber(expires)) {
cookie.push('expires=' + new Date(expires).toGMTString());
}
// 当目录存在且为字符串，则存入cookie
if (utils.isString(path)) {
cookie.push('path=' + path);
}
// 当域存在且为字符串，则存入cookie
if (utils.isString(domain)) {
cookie.push('domain=' + domain);
}
// 是否可以通过HTTP协议的URL设置布尔值为 true 时，则存入cookie
if (secure === true) {
cookie.push('secure');
}
// 将数组转为字符串，并通过 document.cookie 属性来创建 cookie
document.cookie = cookie.join('; ');
},
/**
* cookie 读取 单个读取
* @param {string} name cookie 名
*/
read: function read(name) {
// 正则匹配得到数组
const match = document.cookie.match(new RegExp('(^|;\s*)(' + name + ')=([^;]*)'));
// match 匹配的返回值中第四个元素为需要的值
return match ? decodeURIComponent(match[3]) : null;
},
/**
* cookie 删除 单个删除
* @param {string} name cookie 名
*/
remove: function remove(name) {
// 将过期时间设置为过去的时间，即可删除 cookie, 这里设置成了前一天（86400000为1天的毫秒数）
this.write(name, '', Date.now() - 86400000);
},
};
})();
使用
// 写入
cookies.write('foo', 'bar');
// 删除
cookies.remove('foo');
// 读取
cookies.read('username=John Doe') // => John Doe
功能汇总
日期转换 toGMTString 方法
toGMTString() 方法可根据格林尼治标准时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
介绍这个方法，主要科普一个新旧交替的世界标准时间。
首先这个 GMT 和 UTC 的定义如下：
GMT(Greenwich Mean Time)：格林尼治标准时间。格林尼治是英国伦敦南郊原皇家格林尼治天文台所在地，地球本初子午线的标界处，世界计算时间和经度的起点。格林尼治标准时间过去被当成世界标准的时间。
UTC(Coordinated Universal Time)：协调世界时。又称世界统一时间、世界标准时间、国际协调时间。协调世界时是以原子时秒长为基础，在时刻上尽量接近于世界时的一种时间计量系统。协调世界时是现在使用的世界标准时间。
所以在W3C下面有一行提示：
不赞成使用此方法。请使用 toUTCString() 取而代之！！
toUTCString 方法
根据协调世界时 (UTC) 把 Date 对象转换为字符串，并返回结果。
正则 match 方法
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
返回值
它的返回值是一个存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。
- 如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。
-
- 如果找到匹配结果，它将返回一个数组，存放了与它找到的匹配文本有关的信息。数组的第1个元素存放的是匹配的文本，其余的元素存放与正则表达式的子表达式匹配的文本和input、index、groups三个元素。
- 如果没找到匹配结果，返回 null。
- 如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。
-
- 如果找到匹配结果，它将返回一个数组，数组的第1个元素存放的是匹配的文本，其余元素存放匹配的一个或多个文本。
- 如果没找到匹配结果，返回 null。
小结
- 对 cookie 的读写删操作还是挺简单的，主要是参数要考虑全面。日常开发中使用频率不是很高，但是如果需求涉及到可以帮助快速完成开发。
- 在 standardBrowserEnv 函数中，不难在里面发现 utils 的身影，所以基础工具函数的建设必不可少。
- 把 Date 对象转换为字符串推荐使用 toUTCString 方法。
- 无法删除的属性，可以设置成无效的值，比如这里的通过过期时间提前于当前时间。再比如前一篇介绍过将属性值设置为 undefined。
2.formDataToJSON 抽丝剥茧 formData 与 Object 的转换
FormData 对象
FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。
FormData 对象主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。一般文件流数据的发送，会用到 FormData 对象。
第一条丝线— parsePropPath
matchAll
matchAll 函数会根据入参的正则表达式和字符串，返回所有匹配项的数组。
/**
* It takes a regular expression and a string, and returns an array of all the matches
*
* @param {string} regExp - The regular expression to match against.
* @param {string} str - The string to search.
*
* @returns {Array<boolean>}
*/
const matchAll = (regExp, str) => {
let matches;
const arr = [];
// matches 为每次匹配正确的值
while ((matches = regExp.exec(str)) !== null) {
arr.push(matches);
}
return arr;
}
regExp.exec 方法
在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
匹配的标准用法就是如上功能中的那样，如果需要进一步了解可以阅读 MDN 文档。
parsePropPath
parsePropPath ****函数会将字符串中的字母匹配出来放到数组中。
但看描述和函数还不太确定具体用法，但是经典的来了。
当我们设计的某个函数不好用文字做描述，可以用举例的方式辅助描述。比如下面这个函数，不但举例，还举了多个例子，所以这个函数的用途一目了然。
/**
* It takes a string like `foo[x][y][z]` and returns an array like `['foo', 'x', 'y', 'z']
*
* @param {string} name - The name of the property to get.
*
* @returns An array of strings.
*/
function parsePropPath(name) {
// foo[x][y][z]
// foo.x.y.z
// foo-x-y-z
// foo x y z
return utils.matchAll(/\w+|[(\w*)]/g, name).map(match => {
// 匹配值为数组，当匹配的第一个元素为空数组时返回空字符串，否则返回第二个元素或第一个元素存在值的那个。
return match[0] === '[]' ? '' : match[1] || match[0];
});
}
第二条丝线— arrayToObject
arrayToObject 函数会将数组转换对象。
/**
* Convert an array to an object.
*
* @param {Array<any>} arr - The array to convert to an object.
*
* @returns An object with the same keys and values as the array.
*/
function arrayToObject(arr) {
const obj = {};
// 返回数组索引值的数组
const keys = Object.keys(arr);
let i;
const len = keys.length;
let key;
for (i = 0; i < len; i++) {
key = keys[i];
obj[key] = arr[key];
}
return obj;
}
第三条丝线— forEachEntry
forEachEntry 函数会循环一个可迭代的对象，直到循环结束，把对象的 key 和 value 返回。
/**
* For each entry in the object, call the function with the key and value.
*
* @param {Object<any, any>} obj - The object to iterate over.
* @param {Function} fn - The function to call for each entry.
*
* @returns {void}
*/
const forEachEntry = (obj, fn) => {
const generator = obj && obj[Symbol.iterator];
const iterator = generator.call(obj);
let result;
// 循环直到迭代器已将序列迭代完毕
while ((result = iterator.next()) && !result.done) {
const pair = result.value;
fn.call(obj, pair[0], pair[1]);
}
};
我找了一个可迭代对象测试了一下输出
const data = new Map();
data.set('a', 1);
data.set('b', 2);
data.set('c', 3);
forEachEntry(data, (name, value) => {
let res = name + '-' + value;
console.log('name-value:', res);
});
// 输出结果
// > name-value: a-1
// > name-value: b-2
// > name-value: c-3
formDataToJSON
formDataToJSON函数接受 一个 FormData 对象最终返回 JavaScript 对象。
/**
* It takes a FormData object and returns a JavaScript object
*
* @param {string} formData The FormData object to convert to JSON.
*
* @returns {Object<string, any> | null} The converted object.
*/
function formDataToJSON(formData) {
/**
* 递归函数 将 FormData 的键值全部插入到给 target 对象
* @param {Array} path FormData 的属性名数组
* @param {string} value FormData 的属性值
* @param {Object} target 最终的目标对象
* @param {number} index FormData 的属性值数组的索引值
* @returns 递归是否中止的布尔值
*/
function buildPath(path, value, target, index) {
let name = path[index++];
// isFinite 函数会先将测试值转换为数字，然后再对其进行是否为有限数检测。
const isNumericKey = Number.isFinite(+name);
const isLast = index >= path.length;
name = !name && utils.isArray(target) ? target.length : name;
if (isLast) {
// 如果检查对象具有该属性，将 value 添加到对应的数组中
if (utils.hasOwnProp(target, name)) {
target[name] = [target[name], value];
} else {
target[name] = value;
}
return !isNumericKey;
}
if (!target[name] || !utils.isObject(target[name])) {
target[name] = [];
}
const result = buildPath(path, value, target[name], index);
if (result && utils.isArray(target[name])) {
target[name] = arrayToObject(target[name]);
}
return !isNumericKey;
}
// formData 参数是 FormData 类型且 formData.entries 是一个函数
if (utils.isFormData(formData) && utils.isFunction(formData.entries)) {
const obj = {};
utils.forEachEntry(formData, (name, value) => {
buildPath(parsePropPath(name), value, obj, 0);
});
return obj;
}
return null;
}
我找 axios 自带的测试实例中的例子打印了一下结果
对象的值是数组
const formData = new FormData();
formData.append('foo', '1');
formData.append('foo', '2');
const res = formDataToJSON(formData);
console.log('res', res); // -> { foo: ['1', '2'] }
对象
const formData = new FormData();
formData.append('foo', '1');
formData.append('bar', '2');
const res = formDataToJSON(formData);
console.log('res', res); // -> {foo: '1', bar: '2'}
嵌套对象
const formData = new FormData();
formData.append('foo[bar][baz]', '123');
const res = formDataToJSON(formData);
console.log('res', res); // -> { foo : { bar : {baz: '123'} } }
小结
- formDataToJSON 函数接受 一个 FormData 对象最终返回 JavaScript 对象。
- FormData() 构造函数用于创建一个新的FormData对象。该函数在 Web 中可用，一些环境会报错“FormData is not define”。
- FormData 对象转换 JavaScript 对象的功能不是很常用。但是这里的主要收获是，当函数设计的相对复杂的时候，可以用抽丝剥茧的方式，现将支线整理出来，最终拼凑成一个完整的主线。
总结
功能函数会依据实际需求去实现功能。通过分析 axios 源码中的两个重点的功能函数，学习复杂功能如何设计，以及补充了些知识点，还得到目前代码中有些判断条件简化的收获。
很愉快的一次源码阅读体验。
axios 源码阅读历程
捎带分享一下我关于 axios 源码阅读中的历程。
数月前
因为工作中需要弄清楚 axios 的 request 中的入参而在源码中寻找答案，当时想抽时间进行一次源码阅读，但是没有坚持下去，就此作罢。
数日前
前几天做功能联想，重新开始阅读，这次收获颇多。
心得体会
坚持，果然是帮助完成一件事的良策。
暂无评论内容