ES6新特性--Promise

1. Promise概述

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

1. Promise基本使用

<script type="text/javascript">
            //实例化Promise
            const p = new Promise(function(resolve, reject) {
                //异步内容调用
                setTimeout(function() {
                    /* let data = "数据库中的数据信息";
                    //调用resolve方法，改变p函数的状态为成功
                    //对象有三个状态:初始化、成功、失败
                    resolve(data); */
                    
                    let data = "数据库内容读取失败"
                    //调用对应的reject方法
                    reject(data);

                }, 1000)
            });

            //如果成功，那么就可以调用promise对象对应的then方法
            //成功的方法参数一般叫做value,失败的叫做reason
            p.then(function(value) {
                //成功了调用这一个函数
                console.log("---获取到的值是:" + value)
                
            }, function(reason) {
                //失败了调用这一个函数
               console.log("---获取到的值是:" + reason)
            })
 </script>

1. Promise封装读取文件

//1. 引入 fs 模块
const fs = require('fs');

//2. 调用方法读取文件
/* fs.readFile('./resources/Test.txt', (err, data)=>{
     //如果失败, 则抛出错误
     if(err) throw err;
     //如果没有出错, 则输出内容
     console.log(data.toString());
 }); */

//3. 使用 Promise 封装读取文件的方法
const p = new Promise(function(resolve, reject){
    fs.readFile("./resources/Test.txt", (err, data)=>{
        //判断如果失败
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());
}, function(reason){
    console.log("读取失败!!");
});

1. Promise封装Ajax请求

<script type="text/javascript">
            //Promise封装Ajax请求
            // 接口地址: https://api.apiopen.top/getJoke
            const p = new Promise((resolve, reject) => {
                //1. 创建对象
                const xhr = new XMLHttpRequest();
                //2. 初始化
                xhr.open("GET", "..\\index-1.html");
                //3. 发送
                xhr.send();
                //4. 绑定事件, 处理响应结果,响应状态码系列
                xhr.onreadystatechange = function() {
                    //判断
                    if (xhr.readyState === 4) {
                        //判断响应状态码 200-299
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //表示成功
                            resolve(xhr.response);
                        } else {
                            //如果失败
                            reject(xhr.status);
                        }
                    }
                }
            })

            //指定回调
            //这里拿到请求的状态之后就可以对页面的元素进行操作，而不是把结果
            //又接着写在上面，这样代码的结构就比较清晰
            p.then(function(value) {
                console.log(value);
            }, function(reason) {
                console.error(reason);
            });
</script>

1. Promise.prototype.then 方法

<script type="text/javascript">
            //创建 promise 对象
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('用户数据');
                    // reject('出错啦');
                }, 1000)
            });

            //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
            //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

             const result = p.then(value => {
                 console.log(value);
                 //1. 非 promise 类型的属性，按照return语句的结果返回
                 // return 'iloveyou';
                 
                 //2. 是 promise 对象，里面的Promise对象决定成功与否，返回的值也是一样的
                 // return new Promise((resolve, reject)=>{
                 //     // resolve('ok');
                 //     reject('error');
                 // });
                 
                 //3. 抛出错误
                 // throw new Error('出错啦!');
                 throw '出错啦!';
                 
             }, reason=>{
                 console.warn(reason);
             });

            //链式调用
            p.then(value => {}).then(value => {});
 </script>

1. Promse读取多个文件内容

<script type="text/javascript">
            //引入 fs 模块
            const fs = require("fs");

            //产生回调地狱
            // fs.readFile('./resources/为学.md', (err, data1)=>{
            //     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
            //         fs.readFile('./resources/观书有感.md', (err, data3)=>{
            //             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
            //             console.log(result);
            //         });
            //     });
            // });

            //使用 promise 实现
            const p = new Promise((resolve, reject) => {
                fs.readFile("./resources/为学.md", (err, data) => {
                    resolve(data);
                });
            });

            //value为第一个文件内容
            p.then(value => {
                return new Promise((resolve, reject) => {
                    fs.readFile("./resources/插秧诗.md", (err, data) => {
                        resolve([value, data]);
                    });
                });
                //value变成第一个文件和第二个文件形成的数组
            }).then(value => {
                return new Promise((resolve, reject) => {
                    fs.readFile("./resources/观书有感.md", (err, data) => {
                        //压入
                        value.push(data);
                        resolve(value);
                    });
                })
                //类似于链式调用，不断的往里面添加字符串数据
            }).then(value => {
                console.log(value.join('\r\n'));
            });
</script>

1. Promise.prototype.catch 方法

<script>
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });

        p.catch(function(reason){
            console.warn(reason);
        });
</script>