美文网首页
【es6笔记】es6的入门简介_Promise(6)

【es6笔记】es6的入门简介_Promise(6)

作者: 李明燮 | 来源:发表于2022-05-25 09:50 被阅读0次

    这里整理了Promise相关的内容。

    <!DOCType html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    
    <body>
        <script>
            console.log("--------------Promise--------------");
            /*
            Promise是ES6引入的异步编程的新解决方案。IO相关的 文件fs, request, 数据库连接等等...
            Promise是一个构造函数。
            */
            // resolve 成功后调用 它会返回true,  reject 失败后调用 它会返回false
            const p = new Promise(function (resolve, reject) {
                setTimeout(function () {
                    let data = '数据库数据';
                    resolve(data);
                    // let err = '数据读取失败';
                    //reject(err);
                }, 1000);
            });
            p.then(function (value) { // 成功后执行
                console.log(value);
            }, function (reason) { //失败后执行
                console.log('出错了:', reason);
            });
    
            {
                console.log('---------------------------');
                //创建promise对象
                const p1 = new Promise(function (resolve, reject) {
                    setTimeout(()=>{
                        resolve('成功了');
                        reject('出错了');
                    }, 1000);
                });
    
                //调用 then 方法的返回结果是Promise对象,由回调函数的结果决定
                //1.如果返回结果是非Promise对象,状态是成功,返回为对象成功的值
                const result = p1.then(function (value) {
                    console.log('成功了:', value);
                    // 不写 return 会返回undefined 等于成功。
                    return new Promise((resolve,reject)=>{
                        resolve('ok'); //上层的Promise也是成功
                        //reject('err'); //上层的Promise也是失败
                    })
                }, function (reason) {
                    console.log('失败了:', reason);
                });
    
                //链式调用, 避免回调地狱
                p1.then(()=>{}).then(()=>{}).then();
                
            }
            console.log("---------Promise Ajax操作---------");
            /*
            //普通调用
            {
                //1.创建对象
                const xhr = new XMLHttpRequest();
    
                //2.初始化
                xhr.open("GET", "https://baidu.com");
    
                //3.发送请求
                xhr.send();
    
                //4.绑定事件
                xhr.onreadystatechange = function () {
                    //判断
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                            console.log(xhr.response);
                        } else {
                            console.log(xhr.status);
                        }
                    }
                }
    
            }
    
            //Promise
            {
                const p = new Promise(function (resolve, reject) {
                    //1.创建对象
                    const xhr = new XMLHttpRequest();
    
                    //2.初始化
                    xhr.open("GET", "https://baidu.com");
    
                    //3.发送请求
                    xhr.send();
    
                    //4.绑定事件
                    xhr.onreadystatechange = function () {
                        //判断
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                                resolve(xhr.response);
                            } else {
                                reject(xhr.status);
                            }
                        }
                    }
                });
    
                p.then(function (value) {
                    console.log(value);
                }, function (reason) {
                    console.log(reason);
                })
    
            }
            */
    
        </script>
    </body>
    
    </html>
    

    练习

    读取文件

    const fs = require('fs');
    
    fs.readFile('test.md', (err, data) => {
        if (err) throw err;
        console.log(data.toString());
    });
    
    const p = new Promise(function (resolve, reject) {
        fs.readFile('test.md', (err, data) => {
            if (err) reject(err);
            resolve(data);
        });
    });
    
    p.then(function (value) {
        console.log(value.toString());
    }, function (reason) {
        console.log(reason);
    });
    

    连续读取文件

    const fs = require('fs');
    
    //普通读取文件
    fs.readFile('test.md', (err, data1) => {
        fs.readFile('test1.md', (err, data2) => {
            fs.readFile('test2.md', (err, data3) => {
                let result = data1 + '\r\n' + data2 + '\r\n' + data3;
                console.log(result);
            });
        });
    });
    
    //使用Promise读取文件
    const p = new Promise(function (resolve, reject) {
        fs.readFile('test.md', (err, data) => {
            if (err) reject(err);
            resolve(data);
        });
    });
    
    p.then(function (value) {
        return new Promise((resolve, reject) => {
            fs.readFile('test1.md', (err, data) => {
                if (err) reject(err);
                resolve([value, data]);
            });
        });
    }, function (reason) {
        console.log(reason);
    }).then(function (value) {
        return new Promise((resolve, reject) => {
            fs.readFile('test2.md', (err, data) => {
                if (err) reject(err);
                value.push(data);
                resolve(value);
            });
        });
    }, function (reason) {
        console.log(reason);
    }).then((value) => {
        console.log(value.join('\r\n'));
    });
    

    错误处理

    //处理错误
    const p1 = new Promise(function (resolve, reject) {
        setTimeout(() => {
            reject('出错了');
        })
    });
    
    p1.then(function (value) { }, function (reason) {
        console.log(reason);
    });
    
    //使用catch处理错误
    const p2 = new Promise(function (resolve, reject) {
        setTimeout(() => {
            reject('出错了');
        })
    });
    
    p2.catch(function (reason) {
        console.log(reason);
    })
    

    欢迎大家的意见和交流

    email: li_mingxie@163.com

    相关文章

      网友评论

          本文标题:【es6笔记】es6的入门简介_Promise(6)

          本文链接:https://www.haomeiwen.com/subject/zkreprtx.html