必然会用到的 axios 中自带的工具方法

蚊子前端博客
发布于 2020-11-17 00:32
在 axios 中,使用到了很多基础的工具方法,这些方法我们也可以提炼下,看是否能应用到我们自己的实际项目中

在 axios 中,使用到了很多基础的工具方法,这些方法我们也可以提炼下,看是否能应用到我们自己的实际项目中。

1. 是否是绝对链接

所谓的绝对链接指的是有协议的链接,例如https://, weixin://, file://等,或者只有//开头的链接,都属于绝对链接,其他的则属于相对链接。

COPYJAVASCRIPT

/** * Determines whether the specified URL is absolute * * @param {string} url The URL to test * @returns {boolean} True if the specified URL is absolute, otherwise false */ module.exports = function isAbsoluteURL(url) { // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL). // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed // by any combination of letters, digits, plus, period, or hyphen. return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url); };

2. 将 baseURL 和 requestedURL 拼接成一个 URL

这里通常 baseURL 是比较固定的,在写配置时,可以只写 requestedURL 部分,然后再将 baseURL 和 requestedURL 拼接成一个完成的 URL。

在完成这个功能之前,我们首先要实现将一个 url 合法的前后部分拼接起来的方法,这里假定所有的传入都是合法的,是因为在调用该方法前已经做好了判断:

COPYJAVASCRIPT

/** * Creates a new URL by combining the specified URLs * * @param {string} baseURL The base URL * @param {string} relativeURL The relative URL * @returns {string} The combined URL */ module.exports = function combineURLs(baseURL, relativeURL) { // 将baseURL最后的斜杠和relativeURL最前面的斜杠去掉 return relativeURL ? baseURL.replace(/\/+$/, "") + "/" + relativeURL.replace(/^\/+/, "") : baseURL; };

这时,再要拼接 baseURL 和 requestedURL 时,就要判断 baseUrl 是否存在,或者 path 是否是一个绝对链接,只有在 baseURL 存在,且 requestedURL 不是绝对链接时,才将 baseURL 和 requestedURL 拼接到一起:

COPYJAVASCRIPT

/** * Creates a new URL by combining the baseURL with the requestedURL, * only when the requestedURL is not already an absolute URL. * If the requestURL is absolute, this function returns the requestedURL untouched. * * @param {string} baseURL The base URL * @param {string} requestedURL Absolute or relative URL to combine * @returns {string} The combined full path */ module.exports = function buildFullPath(baseURL, requestedURL) { if (baseURL && !isAbsoluteURL(requestedURL)) { return combineURLs(baseURL, requestedURL); } return requestedURL; };

在使用 url 之前,先调用下buildFullPath方法,就可以确定这一定是一个绝对链接(要保证 baseURL 和 requestURL 至少有 1 个是绝对链接)。

3. 迭代执行数据中的每一项

我们有时会对一个 array 类型或者 object 类型的数据进行循环迭代,执行同一个操作,例如编码其中的每一项等。但在不知道数据类型的前提下,我们可以使用下面的这个方法:

COPYJAVASCRIPT

/** * Iterate over an Array or an Object invoking a function for each item. * * If `obj` is an Array callback will be called passing * the value, index, and complete array for each item. * * If 'obj' is an Object callback will be called passing * the value, key, and complete object for each property. * * @param {Object|Array} obj The object to iterate * @param {Function} fn The callback to invoke for each item */ function forEach(obj, fn) { // Don't bother if no value provided // 如果为空则直接返回 if (obj === null || typeof obj === "undefined") { return; } // Force an array if not already something iterable // 如果既不是array类型,也不是object类型,则将其放到一个数据中 // 方便进行循环处理 if (typeof obj !== "object") { /*eslint no-param-reassign:0*/ obj = [obj]; } // 这里isArray采用 Object.prototype.toString.call 进行判断 // Object.prototype.toString.call(obj) === '[object Array]' if (isArray(obj)) { // Iterate over array values // 迭代数据中的每一项 for (var i = 0, l = obj.length; i < l; i++) { fn.call(null, obj[i], i, obj); } } else { // Iterate over object keys // 迭代object类型数据中的每一项 for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { fn.call(null, obj[key], key, obj); } } } }

4. 将 object 类型的参数拼接到 url 后面

我们在开发过程中,object 类型的数据操作起来比较方便,但在进行 get 请求时或者需要打开带参数的 URL 时,都需要把 object 类型的数据进行转换。实现这个功能最常见的库就是qs了:

COPYJAVASCRIPT

import { stringify } from "qs"; const params = { name: "wenzi", score: "98", company: "tencent", }; // qs中的stringify自带编码 console.log(stringify(params)); // name=wenzi&score=98&company=tencent

在 axios 中,为了方便进行用户进行配置,这里改为了根据用户传入的数据变换方式来处理数据:

COPYJAVASCRIPT

function encode(val) { return encodeURIComponent(val).replace(/%3A/gi, ":").replace(/%24/g, "$").replace(/%2C/gi, ",").replace(/%20/g, "+").replace(/%5B/gi, "[").replace(/%5D/gi, "]"); } /** * Build a URL by appending params to the end * * @param {string} url 要拼接的基本url * @param {object} [params] 将要追加的参数 * @returns {string} 已拼接好的URL */ module.exports = function buildURL(url, params, paramsSerializer) { /*eslint no-param-reassign:0*/ // 若没有参数,则不需要拼接,直接返回url接口 if (!params) { return url; } var serializedParams; if (paramsSerializer) { // 若用户传入了变换数据的函数,则执行 serializedParams = paramsSerializer(params); } else if (utils.isURLSearchParams(params)) { // 若是一个URLSearchParams类型的数据,直接转为string类型 serializedParams = params.toString(); } else { var parts = []; // params是其他类型时 // 对params进行循环 utils.forEach(params, function serialize(val, key) { if (val === null || typeof val === "undefined") { return; } if (utils.isArray(val)) { // 若值是一个数据,则后端可能就是要接收数组格式的数据 // 这里把key添加一个[] key = key + "[]"; } else { // 将val设置为数组,继续循环 val = [val]; } utils.forEach(val, function parseValue(v) { if (utils.isDate(v)) { v = v.toISOString(); } else if (utils.isObject(v)) { v = JSON.stringify(v); } parts.push(encode(key) + "=" + encode(v)); }); }); // 取出的所有的参数进行拼接 serializedParams = parts.join("&"); } if (serializedParams) { // 判断url中是否存在hash路径,若存在,则只获取前面的部分 var hashmarkIndex = url.indexOf("#"); if (hashmarkIndex !== -1) { url = url.slice(0, hashmarkIndex); } // 拼接 url += (url.indexOf("?") === -1 ? "?" : "&") + serializedParams; } return url; };

5. 总结

这些工具方法虽然是 axios 中的,但我们平时中用到的也比较多,这里提炼出来,也希望能给大家在平时开发中,提供一些帮助。

标签:
阅读(725)

公众号:

qrcode

微信公众号:前端小茶馆