DESKTOP-MK04A0R\chuck 3 лет назад
Родитель
Сommit
b83c78ff84
3 измененных файлов с 107 добавлено и 0 удалено
  1. 50 0
      11/index.html
  2. 56 0
      11/src/index.js
  3. 1 0
      README.md

+ 50 - 0
11/index.html

@@ -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

@@ -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

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