Home Explore Help
Sign In
chuck
/
custom-tool-function
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

axios

DESKTOP-MK04A0R\chuck 3 years ago
parent
0f3872401d
commit
b83c78ff84
3 changed files with 107 additions and 0 deletions
Unified View Show Diff Stats
  1. 50 0
      11/index.html
  2. 56 0
      11/src/index.js
  3. 1 0
      README.md

+ 50 - 0
11/index.html
View File 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./src/index.js"></script>
 
+</head>
 
+<body>
 
+    
+    <script>
 
+        /**
 
+         * 1、函数功能
 
+         */
 
+        // axios({
 
+        //     methods:'',
 
+        //     url:'',
 
+        //     params:{},
 
+        //     data:{}
 
+        // }).then(res=>{
 
+        //     console.log(res)
 
+        // })
 
+        // axios.get().then()
 
+        // axios.post().then()
 
+        // axios.put().then()
 
+        // axios.delete().then()
 
+
 
+        /**
 
+         * 2、axios函数封装 
+         */
 
+        axios({
 
+            method:'POST',
 
+            url:'https://api.apiopen.top/getJok',
 
+            params:{
 
+                a:1,
 
+                b:2
 
+            },
 
+            data:{
 
+                c:3,
 
+                d:4
 
+            }
 
+        }).then(res=>{
 
+            console.log(res)
 
+        }).catch(reason=>{
 
+            console.log(reason)
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 56 - 0
11/src/index.js
View File 

@@ -0,0 +1,56 @@
 
+/**
 
+ * axios封装
 
+ * @param {*} param0 
+ * @returns 
+ */
 
+function axios({method,url,params,data}){
 
+    method = method.toUpperCase()
 
+    return new Promise((resolve,reject)=>{
 
+        const xhr = new XMLHttpRequest()
 
+        let str = ''
 
+        for(let k in params){
 
+            str += `${k}=${params[k]}&`
 
+        }
 
+        str = str.slice(0,-1)
 
+        xhr.open(method,url+'?'+str)
 
+        if(['POST','PUT','DELETE'].includes(method)){
 
+            xhr.setRequestHeader(
 
+                'Content-type','application/json'
 
+            )
 
+            xhr.send(JSON.stringify(data))
 
+        }else{
 
+            xhr.send()
 
+        }
 
+        xhr.responseType = 'json'
 
+        xhr.onreadystatechange = function(){
 
+            if(xhr.readyState === 4){
 
+                if(xhr.status >= 200 && xhr.status < 300){
 
+                    resolve({
 
+                        status:xhr.status,
 
+                        message:xhr.statusText,
 
+                        body:xhr.response
 
+                    })
 
+                }else{
 
+                    reject(new Error('请求失败，状态码：'+xhr.status))
 
+                }
 
+            }
 
+        }
 
+    })
 
+}
 
+
 
+//添加方法
 
+axios.get = function(url,options){
 
+    return axios(Object.assign(options,{method:'GET',url:url}))
 
+}
 
+//添加方法
 
+axios.post = function(url,options){
 
+    return axios(Object.assign(options,{method:'POST',url:url}))
 
+}
 
+//添加方法
 
+axios.put = function(url,options){
 
+    return axios(Object.assign(options,{method:'PUT',url:url}))
 
+}
 
+//添加方法
 
+axios.delete = function(url,options){
 
+    return axios(Object.assign(options,{method:'DELETE',url:url}))
 
+}

+ 1 - 0
README.md
View File 

@@ -9,6 +9,7 @@
 
 * 08 字符串函数
 
 * 08 字符串函数
 
 * 09 事件：捕获和冒泡、事件委托、手写事件总线
 
 * 09 事件：捕获和冒泡、事件委托、手写事件总线
 
 * 10 消息订阅与发布
 
 * 10 消息订阅与发布
 
+* 11 axios 自定义封装
 
 
 
 ## 运行
 
 ## 运行
 
 npm i
 
 npm i