手搓promise

Mingz6 · Sep 24, 2021 · cc26e9b · cc26e9b
1 parent 0e77dbb
commit cc26e9b
Show file tree

Hide file tree

Showing 64 changed files with 2,814 additions and 0 deletions.
diff --git a/Promise-exercise/1-Promise基本使用/1-初体验.html b/Promise-exercise/1-Promise基本使用/1-初体验.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本使用</title>
+    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h2 class="page-header">Promise 初体验</h2>
+        <button class="btn btn-primary" id="btn">点击抽奖</button>
+    </div>
+    <script>
+        //生成随机数
+        function rand(m,n){
+            return Math.ceil(Math.random() * (n-m+1)) + m-1;
+        }
+        /**
+            点击按钮,  1s 后显示是否中奖(30%概率中奖)
+                若中奖弹出    恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
+                若未中奖弹出  再接再厉
+        */
+        //获取元素对象
+        const btn = document.querySelector('#btn');
+        //绑定单击事件
+        btn.addEventListener('click', function(){
+            //定时器
+            // setTimeout(() => {
+            //     //30%  1-100  1 2 30
+            //     //获取从1 - 100的一个随机数
+            //     let n = rand(1, 100);
+            //     //判断
+            //     if(n <= 30){
+            //         alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券');
+            //     }else{
+            //         alert('再接再厉');
+            //     }
+            // }, 1000);
+
+            //Promise 形式实现
+            // resolve 解决  函数类型的数据
+            // reject  拒绝  函数类型的数据
+            const p = new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    //30%  1-100  1 2 30
+                    //获取从1 - 100的一个随机数
+                    let n = rand(1, 100);
+                    //判断
+                    if(n <= 30){
+                        resolve(n); // 将 promise 对象的状态设置为 『成功』
+                    }else{
+                        reject(n); // 将 promise 对象的状态设置为 『失败』
+                    }
+                }, 1000);
+            });
+
+            console.log(p);
+            //调用 then 方法
+            // value 值
+            // reason 理由
+            p.then((value) => {
+                alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为 ' + value);
+            }, (reason) => {
+                alert('再接再厉, 您的号码为 ' + reason);
+            });
+
+        });
+
+    </script>
+</body>
+
+</html>
diff --git a/Promise-exercise/1-Promise基本使用/2-Promise实践练习-fs模块.js b/Promise-exercise/1-Promise基本使用/2-Promise实践练习-fs模块.js
@@ -0,0 +1,27 @@
+//
+const fs = require('fs');
+
+//回调函数 形式
+// fs.readFile('./resource/content.txt', (err, data) => {
+//     // 如果出错 则抛出错误
+//     if(err)  throw err;
+//     //输出文件内容
+//     console.log(data.toString());
+// });
+
+//Promise 形式
+let p = new Promise((resolve , reject) => {
+    fs.readFile('./resource/content.txt', (err, data) => {
+        //如果出错
+        if(err) reject(err);
+        //如果成功
+        resolve(data);
+    });
+});
+
+//调用 then 
+p.then(value=>{
+    console.log(value.toString());
+}, reason=>{
+    console.log(reason);
+});
diff --git a/Promise-exercise/1-Promise基本使用/3-Promise实践练习-AJAX请求.html b/Promise-exercise/1-Promise基本使用/3-Promise实践练习-AJAX请求.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise 封装 AJAX</title>
+    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h2 class="page-header">Promise 封装 AJAX 操作</h2>
+        <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
+    </div>
+    <script>
+        //接口地址 https://api.apiopen.top/getJoke
+        //获取元素对象
+        const btn = document.querySelector('#btn');
+
+        btn.addEventListener('click', function(){
+            //创建 Promise
+            const p = new Promise((resolve, reject) => {
+                //1.创建对象
+                const xhr = new XMLHttpRequest();
+                //2. 初始化
+                xhr.open('GET', 'https://api.apiopen.top/getJoke');
+                //3. 发送
+                xhr.send();
+                //4. 处理响应结果
+                xhr.onreadystatechange = function(){
+                    if(xhr.readyState === 4){
+                        //判断响应状态码 2xx   
+                        if(xhr.status >= 200 && xhr.status < 300){
+                            //控制台输出响应体
+                            resolve(xhr.response);
+                        }else{
+                            //控制台输出响应状态码
+                            reject(xhr.status);
+                        }
+                    }
+                }
+            });
+            //调用then方法
+            p.then(value=>{
+                console.log(value);
+            }, reason=>{
+                console.warn(reason);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/1-Promise基本使用/4-Promise封装练习-fs模块.js b/Promise-exercise/1-Promise基本使用/4-Promise封装练习-fs模块.js
@@ -0,0 +1,24 @@
+/**
+ * 封装一个函数 mineReadFile 读取文件内容
+ * 参数:  path  文件路径
+ * 返回:  promise 对象
+ */
+function mineReadFile(path){
+    return new Promise((resolve, reject) => {
+        //读取文件
+        require('fs').readFile(path, (err, data) =>{
+            //判断
+            if(err) reject(err);
+            //成功
+            resolve(data);
+        });
+    });
+}
+
+mineReadFile('./resource/content.txt')
+.then(value=>{
+    //输出文件内容
+    console.log(value.toString());
+}, reason=>{
+    console.log(reason);
+});
diff --git a/Promise-exercise/1-Promise基本使用/5-util.promisify方法.js b/Promise-exercise/1-Promise基本使用/5-util.promisify方法.js
@@ -0,0 +1,13 @@
+/**
+ * util.promisify 方法
+ */
+//引入 util 模块
+const util = require('util');
+//引入 fs 模块
+const fs = require('fs');
+//返回一个新的函数
+let mineReadFile = util.promisify(fs.readFile);
+
+mineReadFile('./resource/content.txt').then(value=>{
+    console.log(value.toString());
+});
diff --git a/Promise-exercise/1-Promise基本使用/6-Promise封装AJAX操作.html b/Promise-exercise/1-Promise基本使用/6-Promise封装AJAX操作.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise封装AJAX操作</title>
+</head>
+<body>
+    <script>
+        /**
+         * 封装一个函数 sendAJAX 发送 GET AJAX 请求
+         * 参数   URL
+         * 返回结果 Promise 对象
+         */
+        function sendAJAX(url){
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.responseType = 'json';
+                xhr.open("GET", url);
+                xhr.send();
+                //处理结果
+                xhr.onreadystatechange = function(){
+                    if(xhr.readyState === 4){
+                        //判断成功
+                        if(xhr.status >= 200 && xhr.status < 300){
+                            //成功的结果
+                            resolve(xhr.response);
+                        }else{
+                            reject(xhr.status);
+                        }
+                    }
+                }
+            });
+        }
+
+        sendAJAX('https://api.apiopen.top/getJok')
+        .then(value => {
+            console.log(value);
+        }, reason => {
+            console.warn(reason);
+        });
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/1-Promise基本使用/resource/content.txt b/Promise-exercise/1-Promise基本使用/resource/content.txt
@@ -0,0 +1,4 @@
+        观书有感
+                作者：朱熹
+半亩方塘一鉴开，天光云影共徘徊。
+问渠那得清如许？为有源头活水来
diff --git a/Promise-exercise/2-Promise-API/1-Promise的API-then和catch.html b/Promise-exercise/2-Promise-API/1-Promise的API-then和catch.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise API</title>
+</head>
+<body>
+    <script>
+        //
+        let p = new Promise((resolve, reject) => {
+            // ** 同步调用
+            // console.log(111);
+            //修改 promise 对象的状态
+            reject('p1:error');
+        });
+
+        // console.log(222);
+
+        //执行 catch 方法
+        p.catch(reason => {
+            console.log(reason);
+        });
+
+        let p2 = new Promise((resolve, reject) => {
+            reject('p2:error');
+        });
+
+        p2.then(value => {
+            console.log(value);
+        }, reason => {
+            console.warn(reason);
+        });
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/2-Promise-API/2-Promise的API-resolve.html b/Promise-exercise/2-Promise-API/2-Promise的API-resolve.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise API - resolve</title>
+</head>
+<body>
+    <script>
+        //
+        let p1 = Promise.resolve(521);
+        //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
+        //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
+        let p2 = Promise.resolve(new Promise((resolve, reject) => {
+            // resolve('OK');
+            reject('Error');
+        }));
+        // console.log(p2);
+        p2.catch(reason => {
+            console.log(reason);
+        })
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/2-Promise-API/3-Promise的API-reject.html b/Promise-exercise/2-Promise-API/3-Promise的API-reject.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise API - reject</title>
+</head>
+<body>
+    <script>
+        // let p = Promise.reject(521);
+        // let p2 = Promise.reject('iloveyou');
+        let p3 = Promise.reject(new Promise((resolve, reject) => {
+            resolve('OK');
+        }));
+
+        console.log(p3);
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/2-Promise-API/4-Promise的API-all.html b/Promise-exercise/2-Promise-API/4-Promise的API-all.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise API - all</title>
+</head>
+<body>
+    <script>
+        let p1 = new Promise((resolve, reject) => {
+            resolve('OK');
+        })
+        // let p2 = Promise.resolve('Success');
+        let p2 = Promise.reject('Error');
+        let p3 = Promise.resolve('Oh Yeah');
+
+        //
+        const result = Promise.all([p1, p2, p3]);
+
+        console.log(result);
+    </script>
+</body>
+</html>
diff --git a/Promise-exercise/2-Promise-API/5-Promise的API-race.html b/Promise-exercise/2-Promise-API/5-Promise的API-race.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise API - race</title>
+</head>
+<body>
+    <script>
+        let p1 = new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve('OK');
+            }, 1000);
+        })
+        let p2 = Promise.resolve('Success');
+        let p3 = Promise.resolve('Oh Yeah');
+
+        //调用
+        const result = Promise.race([p1, p2, p3]);
+
+        console.log(result);
+    </script>
+</body>
+
+</html>