所谓的绝对链接指的是有协议的链接,例如https://, weixin://, file://等,或者只有//开头的链接,都属于绝对链接,其他的则属于相对链接。
/**
* 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);
};
这里通常 baseURL 是比较固定的,在写配置时,可以只写 requestedURL 部分,然后再将 baseURL 和 requestedURL 拼接成一个完成的 URL。
在完成这个功能之前,我们首先要实现将一个 url 合法的前后部分拼接起来的方法,这里假定所有的传入都是合法的,是因为在调用该方法前已经做好了判断:
/**
* 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 拼接到一起:
/**
* 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 个是绝对链接)。
我们有时会对一个 array 类型或者 object 类型的数据进行循环迭代,执行同一个操作,例如编码其中的每一项等。但在不知道数据类型的前提下,我们可以使用下面的这个方法:
/**
* 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);
}
}
}
}
我们在开发过程中,object 类型的数据操作起来比较方便,但在进行 get 请求时或者需要打开带参数的 URL 时,都需要把 object 类型的数据进行转换。实现这个功能最常见的库就是qs了:
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 中,为了方便进行用户进行配置,这里改为了根据用户传入的数据变换方式来处理数据:
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;
};
这些工具方法虽然是 axios 中的,但我们平时中用到的也比较多,这里提炼出来,也希望能给大家在平时开发中,提供一些帮助。
来自:https://www.xiabingbao.com/post/request/axios-some-utils.html
axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击
axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等
axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来
分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码
最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳
发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:
axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数
在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下:这样的话,我们在各个组件中进行请求时
项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!