axios 自定义属性 ts

1、说明：点击了解更多HTML全局属性 data-* 是HTML5的新属性，用于储存页面或应用程序的私有自定义数据，平时我们往元素中储存数据都是放到元素的value中，放到value中的数据用户可以看到，如果不想让用户看到还要将元素隐藏，但是如果我们不能将元素隐藏并且value中有需要存放的值，那么我们还想额外储存一些不想让用户看到，并且对我们的一些判断或操作起到非常关键作用的数据的时候（与渲染无关的信息），data-* 就可以发挥它的作用了，我们可以将一些我们用到的数据自定义的封装到某一个元素中，使没一个元素和对应的数据一一对应，并可以使用JavaScript进行储存、获取、操作并加以利用，非常方便。

2、data-* 使用的注意点：
语法：<element data-* =" somevalue ">
data-*属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀"data-"之后必须至少一个字符
• 属性值可以是任意字符串

注释：用户代理会完全忽略前缀为"data-"的自定义属性。

3、浏览器支持：（所有浏览器都支持data-*属性）

4、data-*属性的赋值和获取方法：

比如：我们创建一个input元素：

<input type="text" name="inputname" id="inputname" data-id="1" data-name-id="1" />

我们想往input元素中存放它的idd

1）getAttribute()方法：

const obj = document.getElementById('inputname');
//getAttribute()取值属性
console.log(obj.getAttribute('data-id'));	//1
//setAttribute()赋值属性
obj.setAttribute("data-id","2");
console.log(obj.getAttribute('data-id'));	//2

2）dataset属性：data-前缀属性可以在JS中通过dataset取值，更加方便

console.log(obj.dataset.id); //1
//data-name-id 连续取值使用驼峰命名法取值
console.log(obj.dataset.nameId); //1
//dataset()赋值
obj.dataset.id="2";		//2
//也可以使用相关的运算符
obj.dataset.nameId ++;	//2
//新增data属性
obj.dataset.id2 = "1";	//1
//删除，设置成null，或者delete操作进行删除
obj.dataset.id2 = null;	//null
delete obj.dataset.id2;	//undefind

以上示例展示了dataset属性如何操作data-*属性，dataset属性值是一个DOMStringMap的一个示例，是一个名值对的映射。在这个映射中，每个data-name的形式的属性都有一个对应到的属性，不同的属性名中没有data-前缀。（比如，自定义属性时data-name，映射中对应的属性就是name）还有一点需要注意的是如果data-属性名中包含了连字符（比如：data-date-of-birth，则映射中对应的属性为dateOfBirth，即转换为相应的驼峰格式来显示）

dataset的兼容问题：

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

3）jquery data()方法

//data方法取值
$("#inputname").data("id");	//1
//data方法赋值
$("#inputname").data("id","2");	//2

注意：假设我们声明两个data-*属性

<input name="inputname" id="inputname" data-appid="123" data-app-id="456" />

获取属性：

$("#inputname").data("appid");	//123
$("#inputname").data("app-id");	//456

属性赋值：

$("#inputname").data("appid","666");	//666

最终的HTML代码：

<input name="inputname" id="inputname" data-appid="123" data-app-id="456" />

需要注意的是，data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 " cache " 附加到了对象上，并使用了一个特殊的属性名称。
以上述代码中，虽然对元素进行了data()赋值操作，但HTML代码中div的data-appid的值仍然为123，因为data()只是修改了缓存的那个值，此时进行$("#myDiv").data(“appid”)的操作，输出的结果为666。

4）jquery attr()方法：

//attr方法取值：
$("#inputname").attr("data-id");	//1
//attr方法赋值：
$("#inputname").attr("data-id","2");	//2