# axios讲解

axios请求讲解

# 简单描述

市面上流行多种javaScript开发工具,各自有自己的请求函数,有的可以调用三方请求代码, API已经支持跨域,开发者可放心使用 md5.js下载

axios.js下载

# post请求
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="./js/axios.min.js"></script>
     <script src="./js/md5.js"></script>
 </head>
 <body>
 <button id="btn">get</button>
 <button id="btn1">post</button>
 <form>
     <input type="file" id="file-input" name="fileContent">
 </form>
 <button id="btn2">上传</button>
 <script>
     const timestamp=Date.parse(new Date());
     let header= {
         // 此参数必传,验证app的令牌
         askKey:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6NzAwMjU3NDg0NzYzOTEwMTQ0LCJnZXRNYW5hZ2VtZW50SWQiOjY0NTQzMTk2OTMzNTMwMDA5NiwiVElNRSI6MTY1NjA2NjAwNDc1Nn0.IUT97sp10EwaPCBJntmc7EXpr7wX99LJaidNrqL3TuY",
         // 此参数如果在app设置开启了验签是必传
         sign:md5('testat' + timestamp),
         // 当开启验签时,此参数为必传
         time:timestamp,
         // 用户token
         apiUserToken:'',
         }
     // get 方法
     var btn = document.querySelector("#btn");
     btn.addEventListener("click",function (params) {
         var url = "https://api.potatocloud.cn/api/verifyCardV2";
         var paramsobj = {mac:'zs',cardStr:"这里是卡密"};
         axios.get(url,{params:paramsobj}).then(function (res) {
             var data = res.data;
             console.log(data);
         });
     });
     // post 方法
     document.querySelector("#btn1").addEventListener("click",function (params) {
         var url = "https://api.potatocloud.cn/api/verifyCardV2";
         var dataobj = {mac:'zs',cardStr:'zs'};
         axios.post(url,
             dataobj,
             {
                 headers: { ...header},
             },
             ).then(function (res) {
             console.log(res.data);
         });
     })
     // 上传文件内容
     document.querySelector("#btn2").addEventListener("click",function (params) {
         let files = document.getElementById("file-input").files
         var url = "https://api.potatocloud.cn/api/uploadFile";
         const formData = new FormData();
         formData.append('img',files[0])
         axios.post(url,
             formData,
             {
                 headers: {
                     ...header,
                 },
             },
         ).then(function (res) {
             console.log(res.data);
             alert("请查看控制台信息")
         });
     })
 </script>
 </body>
 
 
 </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

GET请求实例如下

var url = "https://api.potatocloud.cn/api/verifyCardV2";
         var paramsobj = {mac:'zs',cardStr:"这里是卡密"};
         axios.get(url,{params:paramsobj}).then(function (res) {
             var data = res.data;
             console.log(data);
         });
1
2
3
4
5
6

POST请求实例如下,完整请查看上面实例,开发者可自行封装请求工具类

 var url = "https://api.potatocloud.cn/api/verifyCardV2";
         var dataobj = {mac:'zs',cardStr:'zs'};
         axios.post(url,
             dataobj,
             {
                 headers: { ...header},
             },
             ).then(function (res) {
             console.log(res.data);
         });
1
2
3
4
5
6
7
8
9
10
lastUpdate: 7/25/2024, 4:20:09 PM