Promise（一）介绍、fs读取文件、AJAX请求

Promise

一、promise介绍与基本使用

1、promise是什么

1.1 抽象表达

1）Promise是一门新的技术（ES6规范）

2）Promise是JS中进行异步编程的新解决方案（ps:旧方案是单纯使用回调函数）

1.2 具体表达

1）从语法上来说：Promise就是一个构造函数

2）从功能上来说：Promise对象用来封装一个异步操作并可以获得其成功/失败的结果值

2、为什么要使用Promise？

2.1 指定回调函数的方式更加灵活

1）旧：必须在启动异步任务前指定

2）promise：启动异步任务->返回promise对象->给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

2.2 支持链式调用，可以解决回调地狱

1）什么是回调地狱？

回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件（套娃）

二、Promise的初体验

<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%中奖率）
     *  若中奖弹出   恭喜恭喜，奖品为兰博基尼5元代金券
     *  若未中奖    很遗憾，未中奖
     */
        //获取元素对象
    const btn = document.querySelector('#btn');
    //绑定单击事件
    btn.addEventListener('click', function () {
        //promise形式实现 resolve解决 reject拒绝
          const p = new Promise((resolve, reject) => {
            setTimeout(()=>{
                //30% 1-100 1-30中奖
                //获取从1-100的一个随机数
                let n = rand(1,100);
                //判断
                if (n<=30){
                    resolve(n);//将promise对象状态设置为[成功]
                }else{
                    reject(n);
                }
            },1000);
        });
        //调用then方法
        //value 值
        //reason 理由
        p.then((value)=>{
            alert('恭喜恭喜，奖品为兰博基尼5元代金券!您的中奖号码为：'+value);
        },(reason)=>{
            alert('很遗憾，未中奖,您的号码为：'+reason);
        })
    })

三、Promise实践练习

–fs模块

const fs = require('fs');

//Promise形式
let p = new Promise((resolve, reject) => {
    fs.readFile('content.txt', (err, data) => {
        //如果出错，则抛出错误
        if (err) reject(err);
        //输出文件内容
        resolve(data);
    });
});
//调用then
p.then(value => {
    console.log(value.toString());
}, reason => {
    console.log(reason);
});

–AJAX请求

<div class="container">
        <h2 class="page-header">Promise 封装 AJAX 操作</h2>
        <button class="btn btn-primary">点击发送AJAX请求</button>
    </div>

老师讲课时候的api不能用了，随便上网找了一个

 <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.uomg.com/api/get.kg');
                //3.发送
                xhr.send();
                //4.处理响应结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4){
                        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>

–util.promisify 方法进行promise风格转换

没学过node.js,不太懂😔

/** * util.promisify 方法 */
//引入 Util 模块
const util = require('util');
//引入 fs 模块
const fs = require('fs');
//返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);

mineReadFile('content.txt').then(value=>{
    console.log(value.toString());
});

–promise 封装AJAX请求

<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.uomg.com/api/get.kg')
        .then((value)=>{
            console.log(value);
        },(reason)=>{
            console.log(reason);
        });
</script>